topic Locate Button and Different Projections in ArcGIS JavaScript Maps SDK Questions

Locate Button and Different Projections

JonPainter2 — Sat, 11 Dec 2021 23:37:54 GMT

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

Re: Locate Button and Different Projections

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:37:57 GMT

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

Re: Locate Button and Different Projections

JonPainter2 — Mon, 19 Nov 2018 20:07:13 GMT

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