AnsweredAssumed Answered

Locate Button and Different Projections

Question asked by 1415map on Nov 16, 2018
Latest reply on Nov 19, 2018 by 1415map



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>  
    <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=""> 
    <link rel="stylesheet" type="text/css" href=""> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       
      #map{ padding: 0; } 
      #sliderWrapper { 
        right: 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;
    <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script> 
    <script type="text/javascript" src=""></script> 
    <script type="text/javascript"> 
       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(""); 
            var streets = new ArcGISTiledMapServiceLayer(""); 
         //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); 
           //locate button
          geoLocate = new LocateButton({
            map: map
            }, "LocateButton");
          //esriConfig geometery service
           esriConfig.defaults.geometryService = new GeometryService("");
  <body class="nihilo"> 
    <div data-dojo-type="dijit/layout/BorderContainer"  
="width: 100%; height: 100%; margin: 0;"
      <div id="map"  
="width: 100%; height: 100%; margin: 0;"

          <div id="LocateButton"></div>
        <div id="sliderWrapper"> <!-- slider divs --> 
          <div id="sliderOpacity"  
               data-dojo-props="showButtons:'true', value:0, minimum:0, maximum:100, discreteValues:101, intermediateChanges:true">
            <ol id="sliderLabels"  
        </div> <!-- end slider divs -->