Skip to content

Instantly share code, notes, and snippets.

@yhahn
Created December 5, 2012 22:41
Show Gist options
  • Save yhahn/4220184 to your computer and use it in GitHub Desktop.
Save yhahn/4220184 to your computer and use it in GitHub Desktop.
Custom markers + descriptive text
<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.marker-custom {
width:20px;
height:20px;
/* Negate half the marker width/height to center dot over lat/lon */
margin:-10px 0px 0px -10px;
background:#000;
color:#000;
border-radius:50%;
cursor:pointer;
pointer-events:all;
position:absolute;
/* All markers start hidden only to be shown at the proper zoom level. */
display:none;
}
.marker-custom p {
font:normal 15px/20px Arial,sans-serif;
position:absolute;
left:30px;
top:-15px;
width:200px;
background:#fff; padding:10px;
}
/* Show low zoom markers at low zoom levels. */
body.lozoom div.lo { display:block; }
/* Show hi zoom markers at hi zoom levels. */
body.hizoom div.hi { display:block; }
</style>
<div id='map'></div>
<script>
mapbox.auto('map', 'examples.map-dg7cqh4z', function(map) {
// Create and add marker layer from GeoJSON.
var markerLayer = mapbox.markers.layer().features([
{
"geometry": { "type": "Point", "coordinates": [-72.2531, 43.12357]},
"properties": { "className": "lo", "text": "<s1>Kroka Basecamp</s1><br/>The Expeditions Starts Here!" }
},
{
"geometry": { "type": "Point", "coordinates": [-72.75586,43.5769]},
"properties": { "className": "lo", "text": "<s1>Leg 1</s1><br/>Kroka basecamp to Farm and Wilderness site." }
},
{
"geometry": { "type": "Point", "coordinates": [-72.8955,44.202]},
"properties": { "className": "lo", "text": "<s1>Leg 2</s1><br/>Farm and Wilderness site to Rt. 17." }
},
{
"geometry": { "type": "Point", "coordinates": [-72.2531, 43.12357]},
"properties": { "className": "hi", "text": "<s1>Kroka Basecamp</s1><br/>The Expeditions spends the first month here!" }
},
{
"geometry": { "type": "Point", "coordinates": [-72.75586,43.5769]},
"properties": { "className": "hi", "text": "<s1>Leg 1</s1><br/>The expeditions starts on skis." }
},
{
"geometry": { "type": "Point", "coordinates": [-72.8955,44.202]},
"properties": { "className": "hi", "text": "<s1>Leg 2</s1><br/>We hook up with the catamont trail." }
}
]).factory(function(f) {
// Define a new factory function. This takes a GeoJSON object
// as its input and returns a custom DOM element.
// Custom marker `div.marker-custom`. We add an inner <p> tag with
// description text that will be shown/hidden depending on zoom level.
var marker = document.createElement('div');
marker.className = 'marker-custom ' + f.properties.className;
marker.innerHTML = '<p>'+ f.properties.text +'</p>';
// Add function that centers marker on click
MM.addEvent(marker, 'click', function(e) {
map.ease.location({
lat: f.geometry.coordinates[1],
lon: f.geometry.coordinates[0]
}).zoom(12).optimal();
});
return marker;
});
// Whenever the map is zoomed, check the zoom level
// and set a body class based on it.
map.addCallback('zoomed', function(map) {
if (Math.round(map.zoom()) > 7) {
document.body.className = 'hizoom';
} else {
document.body.className = 'lozoom';
}
});
map.addLayer(markerLayer)
.setExtent(markerLayer.extent())
.zoom(8);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment