AnsweredAssumed Answered

Locate Widget not showing on live site

Question asked by tfagin on Sep 20, 2018
Latest reply on Sep 20, 2018 by rscheitlin

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

Outcomes