Problem with Track Location Widget Causing Web Map to Not Render Basemaps and Layers

CodyHinze · ‎08-24-2018

There is a problem using the latest version 4.8 of the ArcGIS JS API the Track Current Location Widget that causes web maps to stop rendering in several browsers (Firefox 61 MAC and PC, Chrome 67 PC, IE Edge and IE 11). This causes the map to render with the location marked with the blue dot but the base map and all layers to stop rendering despite the ajax request for the content being loaded successfully.

I have tested this with both WEB-GL rendering enabled on as well as the default setup used in the demo site.

To recreate the issue visit the Track Current Location demo page (Track current location | ArcGIS API for JavaScript 4.8 ) using one of the affected browsers.

Here is a sample of what I see using the demo application in Firefox 61 on a Mac: https://www.dropbox.com/preview%2Fmonosnap%2Fscreencast%202018-08-24%20-%20widgets-track-basic.mp4

Has anyone else had this issue? This is currently affecting a production application today despite being tested 10 days ago as working in the same browsers.

RobertScheitlin__GISP · ‎08-27-2018

Cody,

This is definitely an issue with FireFox but here is some code that will work across IE, Chrome and Firefox.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Track current location - 4.8</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
  <script src="https://js.arcgis.com/4.8/"></script>

  <script>
    require([
      "esri/widgets/Track",
      "esri/views/MapView",
      "esri/Map",
      "esri/geometry/Point",
      "dojo/domReady!"
    ], function(
      Track, MapView, Map, Point
    ) {

      var map = new Map({
        basemap: "topo"
      });

      var view = new MapView({
        map: map,
        container: "viewDiv"
      });

      // Create an instance of the Track widget
      // and add it to the view's UI
      var track = new Track({
        view: view,
        goToLocationEnabled: false
      });
      view.ui.add(track, "top-left");

      // The sample will start tracking your location
      // once the view becomes ready
      view.when(function() {
        track.start();
        track.on('track', function(evt){
          var pnt = new Point({
            latitude: evt.position.coords.latitude,
            longitude: evt.position.coords.longitude
          });
          view.goTo({target: pnt, scale: 2500});
        });
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎08-27-2018

Cody,

This is definitely an issue with FireFox but here is some code that will work across IE, Chrome and Firefox.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Track current location - 4.8</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
  <script src="https://js.arcgis.com/4.8/"></script>

  <script>
    require([
      "esri/widgets/Track",
      "esri/views/MapView",
      "esri/Map",
      "esri/geometry/Point",
      "dojo/domReady!"
    ], function(
      Track, MapView, Map, Point
    ) {

      var map = new Map({
        basemap: "topo"
      });

      var view = new MapView({
        map: map,
        container: "viewDiv"
      });

      // Create an instance of the Track widget
      // and add it to the view's UI
      var track = new Track({
        view: view,
        goToLocationEnabled: false
      });
      view.ui.add(track, "top-left");

      // The sample will start tracking your location
      // once the view becomes ready
      view.when(function() {
        track.start();
        track.on('track', function(evt){
          var pnt = new Point({
            latitude: evt.position.coords.latitude,
            longitude: evt.position.coords.longitude
          });
          view.goTo({target: pnt, scale: 2500});
        });
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

CodyHinze · ‎08-27-2018

Robert -- Thank you, you rock! The customized tracker code to delay the event after the view is available works great in all the browsers I've tested so far. It would be great if this was added to the native API.