Track widget not working on iOS Safari and Chrome apps

533
9
Jump to solution
01-14-2019 12:20 PM
AndrewTerwiel
Occasional Contributor II

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?

0 Kudos
1 Solution

Accepted Solutions
MattDriscoll
Esri Contributor

Can you verify the url is using HTTPS?

View solution in original post

0 Kudos
9 Replies
Noah-Sager
Esri Regular Contributor

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
Occasional Contributor II

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

0 Kudos
MattDriscoll
Esri Contributor

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
Occasional Contributor II

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();');

    ...
}
0 Kudos
MattDriscoll
Esri Contributor

Can you verify the url is using HTTPS?

View solution in original post

0 Kudos
AndrewTerwiel
Occasional Contributor II

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

0 Kudos
AndrewTerwiel
Occasional Contributor II

Hi Matt, any more ideas from you?

0 Kudos
MattDriscoll
Esri Contributor

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 

0 Kudos
AndrewTerwiel
Occasional Contributor II

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.

0 Kudos