Overview

You will learn: how to find and track your device location on a map.

With the ArcGIS API for JavaScript it's easy to create an application that finds and tracks your current location on a map. This can be very useful when building applications that need to find your location and get directions or find places around you. To find your location you can use the Locate widget and the Track widget. Both work with the HTML5 Geolocation API to find and update the device's location. To display your location on the map, you can use the default symbol or you can choose your own. The Locate widget will find and zoom to your current location, whereas the Track widget animates the view to your location and can (optionally) rotate according to the direction where the device is heading.

In this lab, you will use the ArcGIS API for JavaScript to build an app to find and track your location on a map.

Accessing the device location with the Geolocation API is not supported on insecure origins. To use it, this lab must run on HTTPS. Note that localhost is considered "potentially secure" and can be used for easy testing in browsers that supports Window.isSecureContext (currently Chrome and Firefox). Learn more here.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

  2. In CodePen, click Fork and save the pen as ArcGIS DevLabs: Display and track your location.

Change the basemap

  1. In the main function, update the existing code to use the streets-navigation-vector basemap. This basemap is optimized for navigation.
      var map = new Map({
        basemap: "streets-navigation-vector"
      });
    

Find your geolocation

The Locate widget uses HTML5 to find your device location and zoom the map. Add this widget to the map to find and display your current location.

  1. In the require statement, add the Locate widget module.

    require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/widgets/Locate",
      "dojo/domReady!"
      //*** ADD ***//
    ], function(Map, MapView, Locate) {
    
  2. In the main function, create the Locate widget and set useHeadingEnabled to false so it does not change the rotation of the map. Use the goToOverride to provide your own custom zoom functionality for the widget. In this case, it will zoom the map to a scale of 1500. Add the widget to the top left of the view.

      var locate = new Locate({
        view: view,
        useHeadingEnabled: false,
        goToOverride: function(view, options) {
          options.target.scale = 1500;
          return view.goTo(options.target);
        }
      });
    
      view.ui.add(locate, "top-left");
    
  3. Run the application and find your location. The map should zoom to a scale of 1500.

Track your location

The Track widget animates the view to your current location. By default it will automatically rotate the view according to your direction of travel. Tracking is activated by toggling the widget on and off. Add this widget to the view.

  1. In the require statement, add the Track widget module.

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Locate",
      //*** ADD ***//
      "esri/widgets/Track",
      "dojo/domReady!"
      //*** ADD ***//
    ], function(Map, MapView, Locate, Track) {
    
  2. In the main function, create the Track widget and set the graphic with a simple green symbol, and set the useHeadingEnabled and goToLocationEnabled properties to false so the map view doesn't rotate or zoom when clicked. Override the goToOverride with a function that simply zooms to the current geolocation and doesn't change the scale of the map. Add the widget to the top left of the view.

      var track = new Track({
        view: view,
        graphic: new Graphic({
          symbol: {
            type: "simple-marker",
            size: "9px",
            color: "green",
            outline: {
              color: "#efefef",
              width: "1.2px"
            }
          }
        }),
        useHeadingEnabled: false,
        goToLocationEnabed: false,
        goToOverride: function(view, options) {
          options.target.scale = null;
          return view.goTo(options);
        }
      });
    
      view.ui.add(track, "top-left");
    
  3. Run the app again. Experiment with finding your current location and then tracking your location by moving around. The blue symbol represents your geolocation and the green symbol represents your tracked location. Visit the documentation to learn more about the geolocation tracking interval and timeout settings.

Congratulations, you're done!

Your app should look something like this.

Challenge

Use a different basemap

Try switching the streets-navigation-vector basemap for satellite and other basemaps.

Add a compass and rotate the view

Add the Compass widget to the view. Set the Track widget useHeadingEnabled property to true and try the application again to see how the view (and compass) change direction when you start tracking.

  require([
    "esri/Map",
    "esri/views/MapView",
    "esri/widgets/Locate",
    "esri/widgets/Track",
    //*** ADD ***//
    "esri/widgets/Compass",
    "dojo/domReady!"
    //*** ADD ***//
  ], function(Map, MapView, Locate, Track, Compass) {
  var compass = new Compass({
    view: view
  });

  // adds the compass to the top left corner of the MapView
  view.ui.add(compass, "top-left");