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>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Sample ARID Map</title>
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;

  <link rel="stylesheet" href="">
  <script ></script>

    ], function(Map, MapView, Search, Locate, Expand, TileLayer, LayerList, BasemapGallery) {

      var layer = new TileLayer({
          url: "",
          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");


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

Cheers and thanks.