Locate Widget not showing on live site

ToddFagin — Thu, 20 Sep 2018 14:00:35 GMT

I have created a simple app to display an image over a basemap. I have included the Locate widget for users. When I test the code on my local machine (or even in the sandbox), it works great. However, when I upload it to my web server, the Locate widget disappears. This is perplexing. Anyone have any insight? I am including the code and a link to the sample site.

Live site

By the way, whileI have your attention and on a completely unrelated note, I am looking for a way to add a "zoom to layer" option, preferably to my layer list (there will eventually be a number of layers, this is just a crude example).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Sample ARID Map</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 ></script>

<script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Search",
      "esri/widgets/Locate",
      "esri/widgets/Expand",
      "esri/layers/TileLayer",
      "esri/widgets/LayerList",
      "esri/widgets/BasemapGallery",
      "dojo/domReady!"
    ], function(Map, MapView, Search, Locate, Expand, TileLayer, LayerList, BasemapGallery) {

      var layer = new TileLayer({
          url: "https://tiles.arcgis.com/tiles/3xOwF6p0r7IHIjfn/arcgis/rest/services/a010002_1/MapServer",
          title: "Drone Image"
       });

      var map = new Map({
        basemap: "streets",
        layers: [layer]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 15,
        center: [-103.064, 36.175] // longitude, latitude
      });

      // create a search widget
       var searchWidget = new Search({
        view: view
      });

      // create the locate widget
      var locateBtn = new Locate({
        view: view
      });

      // Add the locate widget to the top left corner of the view
      view.ui.add(locateBtn, {
        position: "top-left"
      });


      // Add the search widget to the top right corner of the view
      view.ui.add(searchWidget, {
        position: "top-right"
      });



      // create a layer list widget
      var layerList = new LayerList({
        view: view,
      });
      view.ui.add(layerList, "bottom-left");





      // Create a BasemapGallery widget instance and set
      // its container to a div element

      var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div")
      });

      // Create an Expand instance and set the content
      // property to the DOM node of the basemap gallery widget
      // Use an Esri icon font to represent the content inside
      // of the Expand widget

      var bgExpand = new Expand({
        view: view,
        content: basemapGallery
      });

      // Add the expand instance to the ui

      view.ui.add(bgExpand, "top-left");

    });
</script>
</head>

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

Cheers and thanks.

Todd

Re: Locate Widget not showing on live site

RobertScheitlin__GISP — Thu, 20 Sep 2018 14:06:20 GMT

Todd,

The browser console tells you the issue:

insecure-context Geolocation requires a secure origin

From the help doc:

The Locate widget is not supported on insecure origins. To use it, switch your application to a secure origin, such as 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).
As of version 4.2, the Locate Button no longer displays in non-secure web apps. At version 4.1 this only applied to Google Chrome.

Re: Locate Widget not showing on live site

ToddFagin — Thu, 20 Sep 2018 14:11:24 GMT

Thank you for the quick reply.

Re: Locate Widget not showing on live site

RobertScheitlin__GISP — Thu, 20 Sep 2018 14:47:23 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

topic Re: Locate Widget not showing on live site in ArcGIS JavaScript Maps SDK Questions

Locate Widget not showing on live site

Re: Locate Widget not showing on live site

Re: Locate Widget not showing on live site

Re: Locate Widget not showing on live site