Created
December 5, 2012 22:41
-
-
Save yhahn/4220184 to your computer and use it in GitHub Desktop.
Custom markers + descriptive text
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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