Geolocate with Custom Button - JavaScript

[WesAskew]

Does anyone know of a good example of how to implement ESRI's geolocate sample (ArcGIS API for JavaScript Sandbox) into a custom HTML button?  I have tried using the sample widget, but cannot seem to get how to remove ESRI's button and allow my button to run the geolocate function.  I have checked the API and do not see anything that allows for this.  Any help is greatly appreciated.

[TimWitt2]

What if you change the css of their button to use your image?

.LocateButton .zoomLocateButton

.LocateButton .zoomLocateButton:hover

Would that work?

[WesAskew]

The problem with that is I would like for a dojo button (<div data-dojo-type="dijit/form/Button" id="geolocate"> <img id="geolocation" src="images/geolocation.png" width='17px'; height='17px'/> Current Location</div>) to be clicked rather than an image.  I am not sure if I could overwrite that using CSS.  In my widget's constructor:

	var locateButton = new LocateButton({
		theme: "locateButton",
		map: map,
		visible: true,
		showPointer: true,
		geolocationOptions: {
			enableHighAccuracy: true
		}
	}, "geolocate");

I reference this particular button as the DOM element but nothing happens when clicked.  Any suggestions?

[ReneRubalcava · Accepted solution]

You could still use the LocateButton widget, but don't pass it a dom id and don't run the startup method on it or pass the visible parameter as false. The widget methods will still be available to you.

So when you dijit button is clicked, you could do something like this

locateWidget.locate().then(function(e) {
    // do something with the event which returns error, graphic, position and scale
});

locatebutton-amd | API Reference | ArcGIS API for JavaScript

[Anonymous User]

HTML5 has a geolocation API, this is a great resource: Geolocation - Dive Into HTML5

I used that because I didn't realize ESRI had made a LocateButton, but it gives me freedom to design however I want. In addition there are options to follow someone's track and enable high accuracy (e.g. phone gps). You could sub dojo buttons for HTML buttons in this script.

JavaScript

// HTML5 GeoLocation

function getLocation() {
  if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
     var node = dom.byId('locationNode');
     node.innerHTML = "GPS not supported.";
  }
};


function showPosition(position) {
  console.log(position);
  // Adjusting GPS div and a text div
  var gpsButton = dom.byId('gpsButton');
  domStyle.set(gpsButton, 'backgroundColor', 'rgba(97, 195, 226, .75)');
  var gpsText = dom.byId("locationNode");
  gpsText.innerHTML = position.coords.latitude + ", " + position.coords.longitude;
  zoomToGPS([position.coords.longitude, position.coords.latitude]);
};


function zoomToGPS(pLo, pLa) {
  var centering = map.centerAt(pLo, pLa);
  centering.then(function() {
     map.setLevel(12);
  });
  map.graphics.clear();
  var pt = new Point(pLo, pLa, merc);
  var ptSymbol = new SimpleMarkerSymbol({
     "color" : [127, 255, 255, 255],
     "size" : 10,
     "type" : "esriSMS",
     "style" : "esriSMSCircle",
     "outline" : {
        "color" : [0, 0, 0, 255],
        "width" : 1,
        "type" : "esriSLS",
        "style" : "esriSLSSolid"
        }
  });
    var ptGraphic = new Graphic(pt, ptSymbol);
    map.graphics.add(ptGraphic);
  };


function showError(error) {
  var gpsText = dom.byId("locationNode");
  switch(error.code) {
    case error.PERMISSION_DENIED:
      gpsText.innerHTML = "GPS Denied";
      break;
    case error.POSITION_UNAVAILABLE:
      gpsText.innerHTML = "GPS unavailable.";
      break;
    case error.TIMEOUT:
      gpsText.innerHTML = "GPS request timed out.";
    case error.UNKNOWN_ERROR:
      gpsText.innerHTML = "Unknown error.";
      break;
  }
};

eak;
  case error.UNKNOWN_ERROR:
  gpsText.innerHTML = "Unknown error.";
  break;

HTML:

<button id="gpsButton" style="display: inline-block;float:right;">
  GPS
  </button>
  <span id="locationNode" style="float:right; padding-left:10px; padding-right=10px;font-size:14px;line-height:30px; font-family:'Open Sans">

[WesAskew]

Thanks so much for this information.  It was very helpful and solved my issue!

[JeffJacobson]

Here's another alternative (Plunker)...

• Uses Regular HTML button instead of Dojo Button dijit.
• Shows geolocation accuracy radius.