Maps your current location using the Geolocation API.
See also this example, which shows how to map a user's location using Leaflet's locate method and LocationEvent.
Maps your current location using the Geolocation API.
See also this example, which shows how to map a user's location using Leaflet's locate method and LocationEvent.
<!DOCTYPE html> | |
<meta charset=utf-8 /> | |
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' /> | |
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
<div id='map'></div> | |
<script> | |
navigator.geolocation.watchPosition(render); | |
function render(pos) { | |
var lat = pos.coords.latitude; | |
var lon = pos.coords.longitude; | |
var map = L.mapbox.map('map', 'examples.map-20v6611k') | |
.setView([lat, lon], 8); | |
L.mapbox.markerLayer({ | |
// this feature is in the GeoJSON format: see geojson.org | |
// for the full specification | |
type: 'Feature', | |
geometry: { | |
type: 'Point', | |
// coordinates here are in longitude, latitude order because | |
// x, y is the standard for GeoJSON and many formats | |
coordinates: [lon, lat] | |
}, | |
properties: { | |
title: 'Current Location', | |
description: lat.toString() + ', ' + lon.toString(), | |
// one can customize markers by adding simplestyle properties | |
// http://mapbox.com/developers/simplestyle/ | |
'marker-size': 'large', | |
'marker-color': '#f0a', | |
} | |
}).addTo(map) | |
}; | |
</script> |
Might want to save the layer of the users location in a var or something so you update it when it moves? Otherwise you'll get multiple markers (layers) and have no reference to remove them.
Cheers!