geodev-hackerlabs

Add Geolocation to an Esri Leaflet map

In this lab, you will add basic geolocation functionality to an Esri Leaflet application.

1. Open the starter map HTML and copy the contents to a new jsbin.com.

2. Add a function to get the current geolocation position from the Geolocation API:

because of security rules introduced in Chrome 50 (on 4/20/2016), it is mandatory to configure https in order to take advantage of HTML5 location when you move your website into production.

      function getLocation() {
          if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(showPosition);
          } else {
              alert("Geolocation is not supported by this browser.");
          }
      }

1. Add a function to pan and zoom the map to the coordinates we get back from getCurrentPosition():

      function showPosition(position) {
          map.setView([position.coords.latitude, position.coords.longitude], 14);
      }

1. Now let’s tie it all together and have the geolocation function run every time the app loads:

    getLocation();

Your app should run like this one:

• Code
• Live App

Bonus

• Modify the app so that it follows along on a mobile device using Geolocation.watchPosition().