Solved! Go to Solution.
function addGeolocation(){ var locateBtn = new dijit.form.Button({ id:'locateButton', title:'Locate Me', label:'Locate Me' }); dojo.connect(locateBtn,"onClick",function(){ //find current location if(navigator.geolocation){ //getCurrentPosition finds the users current location navigator.geolocation.getCurrentPosition(zoomToLocation, locationError); } }); dojo.byId('webmap-toolbar-center').appendChild(locateBtn.domNode); } function locationError(error){ switch(error.code){ case error.PERMISSION_DENIED: alert("Location not provided"); break; case error.POSITION_UNAVAILABLE: alert("Current location not available"); break; case error.TIMEOUT: alert("Timeout"); break; default: alert("unknown error"); break; } } function zoomToLocation(location) { //add the located point to the map and then zoom to that location var pt = esri.geometry.geographicToWebMercator( new esri.geometry.Point(location.coords.longitude, location.coords.latitude)); map.graphics.clear(); var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([210, 105, 30, 0.5]), 8), new dojo.Color([210, 105, 30, 0.9]) ); graphic = new esri.Graphic(pt, symbol); map.graphics.add(graphic); map.centerAndZoom(pt, 12); }
addGeolocation();
function addGeolocation(){ var locateBtn = new dijit.form.Button({ id:'locateButton', title:'Locate Me', label:'Locate Me' }); dojo.connect(locateBtn,"onClick",function(){ //find current location if(navigator.geolocation){ //getCurrentPosition finds the users current location navigator.geolocation.getCurrentPosition(zoomToLocation, locationError); } }); dojo.byId('webmap-toolbar-center').appendChild(locateBtn.domNode); } function locationError(error){ switch(error.code){ case error.PERMISSION_DENIED: alert("Location not provided"); break; case error.POSITION_UNAVAILABLE: alert("Current location not available"); break; case error.TIMEOUT: alert("Timeout"); break; default: alert("unknown error"); break; } } function zoomToLocation(location) { //add the located point to the map and then zoom to that location var pt = esri.geometry.geographicToWebMercator( new esri.geometry.Point(location.coords.longitude, location.coords.latitude)); map.graphics.clear(); var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([210, 105, 30, 0.5]), 8), new dojo.Color([210, 105, 30, 0.9]) ); graphic = new esri.Graphic(pt, symbol); map.graphics.add(graphic); map.centerAndZoom(pt, 12); }
addGeolocation();
What if i want to zoom to latitude/longitude i enter in to a textbox? How would that work?
There are a couple of ways to do this but one approach would be to use a modified version of the zoomToLocation function. You'll want to pass in your latitude and longitude values that you read from the text box and use those as the zoom point.
var location = {
latitude: mylat, //get lat value from text box
longitude: mylon // get lon value from text box
}
zoomToLocation(location);
function zoomToLocation(location) {
//add the located point to the map and then zoom to that location
var pt = esri.geometry.geographicToWebMercator( new esri.geometry.Point(location.longitude, location.latitude));
map.graphics.clear();
var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([210, 105, 30, 0.5]), 8),
new dojo.Color([210, 105, 30, 0.9])
);
graphic = new esri.Graphic(pt, symbol);
map.graphics.add(graphic);
map.centerAndZoom(pt, 12);
}
Excellent! Thank you!
Here is a sample I made in Plunker with a geolocate button.