<style>
#geolocate {
background:#fff;
position:absolute;
top:50%;
left:50%;
width:158px;
margin-left:-80px;
z-index:1000;
font:13px/18px;
text-align:center;
padding:10px 0;
background:#FFF;
color:#3C4E5A;
display:block;
border:1px solid #BBB;
-webkit-border-radius:3px;
border-radius:3px;
}
#geolocate:hover { background:#ECF5FA; }
</style>
<div id='map'>
</div>
<a href='#' id='geolocate'>Find me</a>
<script>
var m = mapbox.map('map').zoom(2).center({ lat: 0, lon: 0 });
m.addLayer(mapbox.layer().id('examples.map-9ijuk24y'));
m.ui.attribution.add()
.content('<a href="http://mapbox.com/about/maps">Terms & Feedback</a>');
// Create an empty markers layer
var markerLayer = mapbox.markers.layer();
m.addLayer(markerLayer);
var geolocate = document.getElementById('geolocate');
// This uses the HTML5 geolocation API, which is available on
// most mobile browsers and modern browsers, but not in Internet Explorer
//
// See this chart of compatibility for details:
// http://caniuse.com/#feat=geolocation
if (!navigator.geolocation) {
geolocate.innerHTML = 'geolocation is not available';
} else {
geolocate.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
navigator.geolocation.getCurrentPosition(
function(position) {
// Once we've got a position, zoom and center the map
// on it, add ad a single feature
m.zoom(11).center({
lat: position.coords.latitude,
lon: position.coords.longitude
});
markerLayer.add_feature({
geometry: {
coordinates: [
position.coords.longitude,
position.coords.latitude]
},
properties: {
'marker-color': '#000',
'marker-symbol': 'star-stroked',
}
});
// And hide the geolocation button
geolocate.parentNode.removeChild(geolocate);
},
function(err) {
// If the user chooses not to allow their location
// to be shared, display an error message.
geolocate.innerHTML = 'position could not be found';
});
};
}
</script>