Track widget not working on iOS Safari and Chrome apps

AndrewTerwiel · ‎01-14-2019

I'm using ArcGIS JS 4.6 to create a webmap for mobile devices and using the Track widget to get the device's location. On both iPad and iPhone the Track widget is failing to fire the "track" event. Using iOS >= 11

This code snippet shows the event listener. This code is never reached on either iPhone or iPad. On android devices and desktop browsers this code is reached.

var trackOn = track.on('track', function (event) {
}‍‍‍‍

Any ideas anyone?

MattDriscoll · ‎01-15-2019

Can you verify the url is using HTTPS?

View solution in original post

Noah-Sager · ‎01-15-2019

Hi Andrew Terwiel, can you try with more recent versions of the API? The current version is 4.10, but you could incrementally increase the version number and see if this has been addressed in a previous release.

AndrewTerwiel · ‎01-15-2019

Hi. I tried all versions from 4.6 to 4.10, none of which made any difference to the tracking functionality.

MattDriscoll · ‎01-15-2019

Hi Andrew, have you tried this to log an event?

var trackOn = track.on("track", function(event) {
console.log(event);
});‍‍‍

Also make sure you're on a site using https or using localhost.

The following was working for me..

<!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.10</title>

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

    <script>
      require([
        "esri/widgets/Track",
        "esri/views/MapView",
        "esri/Map"
      ], function(Track, MapView, Map) {
        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
        track = new Track({
          view: view
        });
        view.ui.add(track, "top-left");

        var trackOn = track.on("track", function(event) {
          console.log(event);
        });
      });
    </script>
  </head>

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

AndrewTerwiel · ‎01-15-2019

I'm unable to view console message on iOS devices because I'm developing with Windows. However, I put alerts in to show where in the code the failure is occurring. The start alert shows, but none of the alerts within the track event handler are ever shown. So the failure is somewhere in the event handler.

on(nearestToiletBtn, 'click', function (event) {
            track.start();
            alert('track.start();');
});

var trackOn = track.on('track', function (event) {
    alert('track.on("track",');
    trackOn.remove();
    alert('trackOn.remove()');
    track.stop();
    alert('track.stop();');

    ...
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍

MattDriscoll · ‎01-15-2019

Can you verify the url is using HTTPS?

AndrewTerwiel · ‎01-15-2019

Yes it is. I re-checked by retyping the url with https.

AndrewTerwiel · ‎02-07-2019

Hi Matt, any more ideas from you?

MattDriscoll · ‎02-07-2019

Hey Andrew, I don't have any ideas. Have you tried this example in the console and seen what it does? Geolocation.watchPosition() - Web APIs | MDN

AndrewTerwiel · ‎02-10-2019

Hi Matt, the track widget is working on my iOS devices now. I tried HTTPS again, even though I thought I had already ensured the url was using this protocol, and now it works. Looks like an error on my part. PEBCAC.