<style>
.marker-image {
width:100px;
height:100px;
border:1px solid #000;
margin-left:-51px;
margin-top:-51px;
pointer-events:all;
position:absolute;
}
</style>
<div id='map'></div>
<script>
// 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().features([{
"geometry": { "type": "Point", "coordinates": [-74.00, 40]},
"properties": { "image": "http://placehold.it/100x100" }
}, {
"geometry": { "type": "Point", "coordinates": [-75.00, 40]},
"properties": { "image": "http://www.dummyimage.com/100x100/bd00bd/fff" }
}]).factory(function(f) {
// Define a new factory function. This takes a GeoJSON object
// as its input and returns an element - in this case an image -
// that represents the point.
var img = document.createElement('img');
img.className = 'marker-image';
img.setAttribute('src', f.properties.image);
return img;
});
map.addLayer(markerLayer)
.setExtent(markerLayer.extent());
// Attribute map
map.ui.attribution.add()
.content('<a href="http://mapbox.com/about/maps">Terms & Feedback</a>');
</script>