Skip to main content

Panoramio Layer...

    Let's start with the obvious question first...What is Panoramio? Panoramio is a geolocation-oriented photo sharing website. Panoramio website was officially launched on October 3, 2005 by Joaquín Cuenca Abela and Eduardo Manchón Aguilar, two Spanish entrepreneurs and was acquired by Google in July 2007.

    Accepted photos uploaded to the site can be accessed as a layer in Google Maps, with new photos being added at the end of every month. The site's goal is to allow Google Maps and Google Earth users to learn more about a given area by viewing the photos that other users have taken at that place. The website is available in several languages and can be viewed here.

    You may add photos from Panoramio as a layer to your maps using the PanoramioLayer object. The PanoramioLayer renders a layer of geotagged photo icons from Panoramio on the map as a series of large and small photo icons. Let us now have a look at the following code to understand the concept in more detail.



    You can copy the above code in a text file and save it with html extension. Open the file in your browser and you will see a map centred at Pune, India. The output of the code is as ssen in the result section above.

    By default, clicking on a photo icon within a Panoramio layer brings up an info window with a larger photo and more information. You may remove this default behavior by setting the layer's suppressInfoWindows property to true. This is a basic example on Panoramio Layer. More examples coming soon...! Till then, keep mapping!..
Labels:

Comments

  1. BharathiMarch 25, 2011 at 2:34 AM

    nice one! i think u keep updating urself all the time.

    ReplyDelete
  2. Shreerang PatwardhanMarch 25, 2011 at 7:39 AM

    I atleast try 2...dats the need of the hour.....:)

    ReplyDelete

Post a Comment

Please leave your comments here...

Recommended for You

ES6 101 - Map

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

Jquery Mobile Form - Slider control

    Input field of type range is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the range input type with capsule-corners and adds a circular handle to the slider.   The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify the min and max attribute values to set the slider's range. If you want to constrain input to specific increments, add the step attribute.   As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.     The range input elements are available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized input el...
Post a Comment
Read more

Jquery Mobile - Filtering the Listview

    So you have a very long list of items and you want to provide the users with a searching facility. There is nothing to worry here. Jquery Mobile provides a very simple solution to a very difficult and time-comsuming looking problem.   jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the  data-filter="true"  attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...".     Now again, this is not going to satisfy the client. The client will not like the default search and will ask for  customization . No problem again. We can do it very easily again by virtue of the Jquery Mobile framework.   To configure the placeholder text in the search input,  use the data ...
Post a Comment
Read more

Form info window

         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!          In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using ev...
5 comments
Read more

Mumbai Metro to implement GIS

          Mumbai's Metro rail system, which is scheduled to take off by next year, will have a Geographic Information System (GIS) for mapping the entire rail tracks and nearby areas to enhance safety, maintenance and traffic regulation. Mumbai Metro One Pvt. Ltd. (MMOPL) - the special purpose vehicle promoted by Reliance Infrastructure, Mumbai Metropolitan Region Development Authority (MMRDA) and French multinational firm Veolia - is implementing the GIS along the Versova-Andheri-Ghatkopar (VAG) corridor in Phase-I of the project. This is a first-of-its-kind initiative in the country for Metro rail management.           The GIS system will map the exact location of the trains and all emergency services, including fire stations, police stations and hospitals along the alignment. In case there is a fire incident or other emergencies, the exact location of the nearest fire station or po...
1 comment
Read more