<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; left: 0; right:100px; }
#count {
position:absolute;
right:0px;
width:100px;
top:0px;
bottom:0px;
font-size:40px;
z-index:99;
color:#fff;
padding:10px;
background:#000;
}
</style>
<div id='map'></div>
<div id='count'></div>
<script>
// here we use an interactive layer with the mapbox.layer shortcut, which
// requires us to use a callback for when the layer is loaded, and then
// to refresh the map's interactivity
// If you're creating a new interactive layer, follow the tooltips docs:
// http://mapbox.com/tilemill/docs/crashcourse/tooltips/
var map = mapbox.map('map');
map.zoom(3).center({ lat: 48, lon: -100 });
map.addLayer(mapbox.layer().id('examples.map-8ced9urs', function() {
// this function runs after the layer examples.map-8ced9urs is loaded
// from MapBox and we know what interactive features are supported.
map.interaction.auto();
map.interaction.off('on');
map.interaction.off('off');
map.interaction.on({
on: function(o) {
document.getElementById('count').innerHTML = o.data.count;
}
});
}));
// Attribute map
map.ui.attribution.add()
.content('<a href="http://mapbox.com/about/maps">Terms & Feedback</a>');
</script>