GeoLocation
Using geoLocation with esri maps.Solution works on
- Internet explorer 10
- FireFox
- Opera
- Chrome
- Windows Phone (nokia in office)
- Android (Samsung)
- IOS (Iphone 4)
- Safari
Now lets get to the code:
This is way how we can detect whether the geolocation is supported in your browser. Obviously you will want to add some different code instead of displaying your result into console.
if (!navigator.geolocation) {
console.log("geolocation is not supported by this browser.");
}
Method that actually gets the location is as follows
function getLocation() {
console.log("Supports location, getting current location");
navigator.geolocation.getCurrentPosition(showPosition, errorCallBack);
}
This method has 2 callbacks. First method that displays position, and second that handles all errors.function showPosition
function showPosition(position) {
console.log("Latitude: " + position.coords.latitude);
console.log("Longitude: " + position.coords.longitude);
}
note: position does not get filled rightaway but its callback.function errorCallBack
function errorCallBack() {
// deal with errors
}
Here I am including my testing code with esri maps.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<script src="//js.arcgis.com/3.7/"></script>
</head>
<body>
<div id="locationInfo">
<a style="float:right;" class="Button" href="#" onclick="getLocation()">
<i class="icon-map-marker"></i>
<span class="i-name">Use my location</span>
</a>
</div>
<div style="clear: both;"></div>
<div style="width: 400px;height: 400px;">
<div id="map" class="map">
</div>
</div>
<script>
var map;
var defaultZoomLevel = 12;
require([
"esri/map",
"dojo/domReady!"
], function (
Map, LocateButton
) {
map = new Map("map", {
center: [-2.58791, 51.454513],
zoom: defaultZoomLevel,
basemap: "streets"
});
});
if (!navigator.geolocation) {
console.log("Geolocation is not supported by this browser.");
RemoveLocation();
}
function getLocation() {
console.log("Supports location, getting current location");
navigator.geolocation.getCurrentPosition(showPosition, errorCallBack);
}
function showPosition(position) {
console.log("Latitude: " + position.coords.latitude);
console.log("Longitude: " + position.coords.longitude);
CenterMap(position.coords.latitude, position.coords.longitude);
}
function CenterMap(lat, long) {
var CenPoint = new esri.geometry.Point({ "x": long, "y": lat, " spatialReference": { " wkid": 4326} });
var pointer = esri.geometry.geographicToWebMercator(CenPoint);
map.centerAndZoom(pointer, defaultZoomLevel);
}
function errorCallBack() {
// deal with errors
}
function RemoveLocation() {
document.getElementById("locationInfo").innerHTML = "";
}
</script>
</body>
</html>
More reading: diveintohtml5 (this is thanks to Peter Bridger)
No comments:
Post a Comment