Skip to content

Instantly share code, notes, and snippets.

@seanknox
Created November 13, 2012 01:46
Show Gist options
  • Save seanknox/4063362 to your computer and use it in GitHub Desktop.
Save seanknox/4063362 to your computer and use it in GitHub Desktop.
HTML code for HTML5 geolocation + Leaflet/OpenStreetMaps
<div style="width:800px; height:500px" id="map"></div>
<script type='text/javascript'>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
});
var map = L.map('map')
L.tileLayer('http://{s}.tile.cloudmade.com/1cc75fcc8e2243d1b2f6aab1e5850be1/998/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(map);
map.locate({setView: true, maxZoom: 16});
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
}else {
alert("Geolocation API is not supported in your browser. :(");
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment