nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

タグ付けされた投稿をもっと見る

Accepted answers

RRubalcava

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

All comments

JeffJacobson

Here's another alternative (Plunker)...

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

WesAskew

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

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

RRubalcava

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

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?

TimWitt2

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

.LocateButton .zoomLocateButton

.LocateButton .zoomLocateButton:hover

Would that work?

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.