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.
Todd
Solved! Go to Solution.
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.
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.
Thank you for the quick reply.
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.