AnsweredAssumed Answered

Locate Button and Different Projections

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

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> 

Outcomes