Locate Button

Esri ArcGIS JavaScript API 3.24. https://gis.stackexchange.com/questions/282815/need-to-set-centerat-to-true-before-calling-locate-method

by Alex Azuero

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<script src="https://js.arcgis.com/3.24/init.js"></script>
<script type="text/javascript">
  var dojoConfig = {
    async: true
  };

</script>
<div class="buttonsWrapper">
  <div id="LocateButton">
    a
  </div>
  <input type="button" id="zoomToLocationButton" value="Zoom to my location!" />
</div>

<div id="map">
</div>

CSS

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
  width: 100%;
  margin: 0px;
}

JavaScript

// https://gis.stackexchange.com/questions/282815/need-to-set-centerat-to-true-before-calling-locate-method
require([
  'esri/map',
  'esri/layers/FeatureLayer',
  'esri/layers/GraphicsLayer',
  'esri/dijit/LocateButton',
  
  'dojo/on',
  'dojo/dom',
  'dojo/domReady!'
], function(
  Map, FeatureLayer, GraphicsLayer, LocateButton,
  on, dom
) {
  var map = new Map("map", {
    center: [-87.6273, 41.8756],
    zoom: 13,
    basemap: "topo"
  });

 	on(dom.byId('zoomToLocationButton'), 'click', function() {
  	console.log('a', map);
    customLocate(map, geoLocateWidget);
  }.bind(this));

  var fl = new FeatureLayer('https://services1.arcgis.com/g2TonOxuRkIqSOFx/ArcGIS/rest/services/Bike_Racks/FeatureServer/0');
  map.addLayer(fl);


  var locateButtonLayer = new GraphicsLayer();
  map.addLayer(locateButtonLayer);
  var geoLocateWidget = new LocateButton({
    map: map,
    graphicsLayer: locateButtonLayer,
    useTracking: true,
    setScale: false,
    centerAt: false
  }, "LocateButton");
  geoLocateWidget.startup();
});

var customLocate = function(map, geoLocateWidget) {
  console.log('customLocate!!', map, geoLocateWidget.graphicsLayer.graphics[0]);
  map.centerAndZoom(geoLocateWidget.graphicsLayer.graphics[0].geometry);
};