Hello,
I'm trying to add a locate button to my basic HTML/js webpage and am having two issues.
The first is my map is in a different projection (2193) and I see from the reference that I need to:
If the spatial reference of the map is not Web Mercator (wkid 3857) or WGS84 (wkid 4326) then you must set a default GeometryService in the default API configurations of esri/config so the user's location can be reprojected to the spatial reference of the map.
I've added a new config geometry service to my code but it's not doing anything, do I need to do something other to use this?
The other problem is my Locate button isn't showing up. I've used a slider example (another functionality that I needed) that uses nihilo css and I think it is overwriting the button. Not sure.
Thanks for your time.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Basemaps with an Opacity Slider</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ padding: 0; }
#sliderWrapper {
position:absolute;
right: 30px;
bottom:30px;
z-Index: 40;
width: 250px;
height: 50px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#sliderLabels {
position: relative;
top: -1px;
height: 1.2em;
font-size: 80%;
font-weight: bold;
font-family: arial;
color: #444;
padding: 3px;
margin: 5px 10px 0 10px;
}
#LocateButton {
position: absolute;
top: 95px;
left: 80px;
z-index: 100;
}
</style>
<script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
<script type="text/javascript" src="http://js.arcgis.com/3.8/"></script>
<script type="text/javascript">
require([
"esri/map",
"esri/config",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Point",
"esri/SpatialReference",
"dojo/on",
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/HorizontalSlider",
"dijit/form/HorizontalRuleLabels",
"esri/dijit/LocateButton"
],
function (Map, ArcGISTiledMapServiceLayer, Point, SpatialReference, on, registry, LocateButton, esriConfig) {
//Create Map
var map = new Map("map", {
center: new Point(1693800, 5675045, new SpatialReference({ wkid: 2193 })),
zoom: 8
});
//Add Basemap Layers for Slider
var oceans = new ArcGISTiledMapServiceLayer("https://maps.npdc.govt.nz/arcgis/rest/services/Aerial/MapServer");
map.addLayer(oceans);
var streets = new ArcGISTiledMapServiceLayer("https://maps.npdc.govt.nz/arcgis/rest/services/Illustrated/MapServer");
map.addLayer(streets);
//Wire event handler for the dojo slider
map.on("load", function() {
on(registry.byId('sliderOpacity'), 'change', changeOpacity);
});
//Slider Logic
function changeOpacity(op) {
var newOp = (op / 100);
streets.setOpacity(1.0 - newOp);
oceans.setOpacity(newOp);
}
//locate button
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
//esriConfig geometery service
esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
});
</script>
</head>
<body class="nihilo">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
style="width: 100%; height: 100%; margin: 0;">
<div id="LocateButton"></div>
<div id="sliderWrapper"> <!-- slider divs -->
<div id="sliderOpacity"
data-dojo-type="dijit/form/HorizontalSlider"
data-dojo-props="showButtons:'true', value:0, minimum:0, maximum:100, discreteValues:101, intermediateChanges:true">
<ol id="sliderLabels"
data-dojo-type="dijit/form/HorizontalRuleLabels"
data-dojo-props="container:'topDecoration'">
<li>Streets</li>
<li>Oceans</li>
</ol>
</div>
</div> <!-- end slider divs -->
</div>
</div>
</body>
</html>
Solved! Go to Solution.
Jon,
You had several issue and the main issue was you have your requires and related vars out of order.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Basemaps with an Opacity Slider</title>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.26/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#sliderWrapper {
position:absolute;
right: 30px;
bottom:30px;
z-Index: 40;
width: 250px;
height: 50px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#sliderLabels {
position: relative;
top: -1px;
height: 1.2em;
font-size: 80%;
font-weight: bold;
font-family: arial;
color: #444;
padding: 3px;
margin: 5px 10px 0 10px;
}
#LocateButton {
position: absolute;
top: 95px;
left: 80px;
z-index: 100;
}
</style>
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="https://js.arcgis.com/3.26/"></script>
<script type="text/javascript">
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Point",
"esri/SpatialReference",
"dojo/on",
"dijit/registry",
"esri/dijit/LocateButton",
"esri/config",
"esri/tasks/GeometryService",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/HorizontalSlider",
"dijit/form/HorizontalRuleLabels"
],
function(Map, ArcGISTiledMapServiceLayer, Point, SpatialReference, on, registry, LocateButton, esriConfig, GeometryService) {
//esriConfig geometery service
esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
//Create Map
var map = new Map("map", {
center: new Point(1693800, 5675045, new SpatialReference({
wkid: 2193
})),
zoom: 8
});
//Add Basemap Layers for Slider
var oceans = new ArcGISTiledMapServiceLayer("https://maps.npdc.govt.nz/arcgis/rest/services/Aerial/MapServer");
map.addLayer(oceans);
var streets = new ArcGISTiledMapServiceLayer("https://maps.npdc.govt.nz/arcgis/rest/services/Illustrated/MapServer");
map.addLayer(streets);
//Wire event handler for the dojo slider
map.on("load", function() {
on(registry.byId('sliderOpacity'), 'change', changeOpacity);
});
//Slider Logic
function changeOpacity(op) {
var newOp = (op / 100);
streets.setOpacity(1.0 - newOp);
oceans.setOpacity(newOp);
}
//locate button
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
});
</script>
</head>
<body class="nihilo">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="LocateButton"></div>
<div id="sliderWrapper">
<!-- slider divs -->
<div id="sliderOpacity" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="showButtons:'true', value:0, minimum:0, maximum:100, discreteValues:101, intermediateChanges:true">
<ol id="sliderLabels" data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props="container:'topDecoration'">
<li>Streets</li>
<li>Oceans</li>
</ol>
</div>
</div> <!-- end slider divs -->
</div>
</div>
</body>
</html>
Jon,
You had several issue and the main issue was you have your requires and related vars out of order.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Basemaps with an Opacity Slider</title>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.26/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#sliderWrapper {
position:absolute;
right: 30px;
bottom:30px;
z-Index: 40;
width: 250px;
height: 50px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#sliderLabels {
position: relative;
top: -1px;
height: 1.2em;
font-size: 80%;
font-weight: bold;
font-family: arial;
color: #444;
padding: 3px;
margin: 5px 10px 0 10px;
}
#LocateButton {
position: absolute;
top: 95px;
left: 80px;
z-index: 100;
}
</style>
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="https://js.arcgis.com/3.26/"></script>
<script type="text/javascript">
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Point",
"esri/SpatialReference",
"dojo/on",
"dijit/registry",
"esri/dijit/LocateButton",
"esri/config",
"esri/tasks/GeometryService",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/HorizontalSlider",
"dijit/form/HorizontalRuleLabels"
],
function(Map, ArcGISTiledMapServiceLayer, Point, SpatialReference, on, registry, LocateButton, esriConfig, GeometryService) {
//esriConfig geometery service
esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
//Create Map
var map = new Map("map", {
center: new Point(1693800, 5675045, new SpatialReference({
wkid: 2193
})),
zoom: 8
});
//Add Basemap Layers for Slider
var oceans = new ArcGISTiledMapServiceLayer("https://maps.npdc.govt.nz/arcgis/rest/services/Aerial/MapServer");
map.addLayer(oceans);
var streets = new ArcGISTiledMapServiceLayer("https://maps.npdc.govt.nz/arcgis/rest/services/Illustrated/MapServer");
map.addLayer(streets);
//Wire event handler for the dojo slider
map.on("load", function() {
on(registry.byId('sliderOpacity'), 'change', changeOpacity);
});
//Slider Logic
function changeOpacity(op) {
var newOp = (op / 100);
streets.setOpacity(1.0 - newOp);
oceans.setOpacity(newOp);
}
//locate button
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
});
</script>
</head>
<body class="nihilo">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="LocateButton"></div>
<div id="sliderWrapper">
<!-- slider divs -->
<div id="sliderOpacity" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="showButtons:'true', value:0, minimum:0, maximum:100, discreteValues:101, intermediateChanges:true">
<ol id="sliderLabels" data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props="container:'topDecoration'">
<li>Streets</li>
<li>Oceans</li>
</ol>
</div>
</div> <!-- end slider divs -->
</div>
</div>
</body>
</html>
Hello Robert,
Thank you very much for your help and answer. I can now see the Locate button and it works. I think I understand how I had the vars I had mixed up.
Take care
Jon