Over a million developers have joined DZone.

Geolocation and Interactive Maps

· Web Dev Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

Geolocation feature in a web browser is the key to improve the location-awareness of a web app. The following simple geolocation demo combines the information given by the browser with a textual geocoded address and a visual marker in a map.

geomaps

Getting the approximate address is not difficult to achieved using Google Maps Reverse Geocoding API. In fact, this was exactly how I have done it in my previous geolocation example. Now, displaying the location itself is also not a difficult matter, one can simple use the ubiquitous Google Maps or the alternatives such as OpenStreetMap.

With the recent release of Leaflet 0.6, I finally found some extra motivation to show how to use it in this context. For the tile data itself, I decided to give CloudMade a try (you need to sign up to get the API key and enjoy 500,000 free tiles every month). It took only a few minutes to implement this feature, combining Leaflet and CloudMade, especially if you follow Leaflet’s Getting Started guide. Some relevant code fragment:

map = L.map('map').setView([coords.latitude, coords.longitude], 11);
map.zoomControl.setPosition('bottomright');
L.tileLayer('http://{s}.tile.cloudmade.com/apikey/997/256/{z}/{x}/{y}.png', {
  attribution: 'Map data © ...', maxZoom: 18
}).addTo(map);
geocoder.geocode({'latLng': pos}, function (results, status) {
  var addr;
  if (status == google.maps.GeocoderStatus.OK) {
    addr = results[0].formatted_address;
    geocode.textContent = addr;
    L.marker([coords.latitude, coords.longitude]).addTo(map).bindPopup(addr);
});

Using Leaftlet, the map also works well on a variety of mobile platforms, everything from Android smartphones to Chromebook Pixel. And yes, it understands touch API for smooth panning and zooming. It feels good when pinch-to-zoom just works!

To give it a try, hit ariya.github.io/html/geolocation with your modern browser.



The Web Dev Zone is brought to you by Stormpath—offering a complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".

Topics:

Published at DZone with permission of Ariya Hidayat , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}