Locate Button and Different Projections

Question

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" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Basemaps with an Opacity Slidertitle> <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"> <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>Streetsli> <li>Oceansli> ol> div> div> div> div> body> html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Accepted Answer

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" />  <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">  <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>  </div> </div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍