topic Re: Geolocate with Custom Button - JavaScript in ArcGIS JavaScript Maps SDK Questions

Geolocate with Custom Button - JavaScript

WesAskew — Tue, 23 Sep 2014 14:43:49 GMT

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.

Re: Geolocate with Custom Button - JavaScript

TimWitt2 — Tue, 23 Sep 2014 14:50:37 GMT

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

.LocateButton .zoomLocateButton

.LocateButton .zoomLocateButton:hover

Would that work?

Re: Geolocate with Custom Button - JavaScript

WesAskew — Tue, 23 Sep 2014 15:04:33 GMT

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?

Re: Geolocate with Custom Button - JavaScript

ReneRubalcava — Tue, 23 Sep 2014 16:20:06 GMT

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

Re: Geolocate with Custom Button - JavaScript

Anonymous User — Tue, 23 Sep 2014 16:30:06 GMT

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

Re: Geolocate with Custom Button - JavaScript

WesAskew — Tue, 23 Sep 2014 16:50:01 GMT

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

Re: Geolocate with Custom Button - JavaScript

JeffJacobson — Wed, 24 Sep 2014 23:16:01 GMT

Here's another alternative (Plunker)...

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