<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; right:300px; left:0; }
#alert {
position:absolute; top: 0; right: 0;
bottom: 0; width: 260px; background:#e8e8e8;
padding:20px;
}
h1 { margin-top:0; }
</style>
<div id='map'></div>
<div id='alert'></div>
<script>
var map = mapbox.map('map');
map.addLayer(mapbox.layer().id('examples.map-20v6611k'));
// Create an empty markers layer
var markerLayer = mapbox.markers.layer();
// Add interaction to this marker layer. This
// binds tooltips to each marker that has title
// and description defined.
map.addLayer(markerLayer);
var alert = document.getElementById('alert');
markerLayer.factory(function(f) {
var elem = mapbox.markers.simplestyle_factory(f);
MM.addEvent(elem, 'click', function(e) {
// clear the alert box
alert.innerHTML = '';
// add a header and paragraph, and fill them with content
// from the feature, which we've stored as the variable 'f'
var h1 = alert.appendChild(document.createElement('h1'));
var p = alert.appendChild(document.createElement('p'));
// pull the title and description attributes of the feature.
// you could customize this to pull other attributes
h1.innerHTML = f.properties.title;
p.innerHTML = f.properties.description;
// prevent this event from bubbling down to the map and clearing
// the content
e.stopPropagation();
});
return elem;
});
// clear the content of alert when the user clicks on a map area other
// than a tooltip
MM.addEvent(map.parent, 'click', function() {
alert.innerHTML = '';
});
map.zoom(5).center({ lat: 37, lon: -77 });
// See the 'adding a single marker example for help with adding a marker
markerLayer.add_feature({
geometry: {
coordinates: [-77, 37.9]
},
properties: {
'marker-color': '#000',
'marker-symbol': 'star-stroked',
title: 'Example Marker',
description: 'This is a single marker.'
}
});
// Attribute map
map.ui.attribution.add()
.content('<a href="http://mapbox.com/about/maps">Terms & Feedback</a>');
</script>