<div id='map'></div>
<script>
// GeoJSON input features
// The image and url properties of the features will be used in
// the tooltips
var features = [{
"geometry": { "type": "Point", "coordinates": [0, 0]},
"properties": { "id": 1 }
}];
// Create map
var map = mapbox.map('map');
map.addLayer(mapbox.layer().id('examples.map-vyofok3q'));
// Create and add marker layer
var markerLayer = mapbox.markers.layer()
// Assign the initial features
.features(features)
// This is the important API in this example: .key sets a key getter
// function that ensures that re-calling .features() with moved
// features just moves the elements rather than removing and
// redrawing them.
.key(function(f) {
return f.properties.id;
});
var t = 0;
window.setInterval(function() {
// making a lissajous curve here just for fun. this isn't necessary
features[0].geometry.coordinates[0] = Math.cos(t * 0.5) * 50;
features[0].geometry.coordinates[1] = Math.sin(t) * 50;
// Reassign the features
markerLayer.features(features);
t += 0.1;
}, 50);
map.addLayer(markerLayer);
// Set iniital center and zoom
map.centerzoom({
lat: 0,
lon: 0
}, 3);
// Attribute map
map.ui.attribution.add()
.content('<a href="http://mapbox.com/about/maps">Terms & Feedback</a>');
</script>