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.
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.
