Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created January 8, 2013 22:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/4488818 to your computer and use it in GitHub Desktop.
Save tmcw/4488818 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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>
#map-ui {
position:absolute;
top:10px;left:10px;
z-index:100;
}
#map-ui ul {
list-style:none;
margin:0;padding:0;
}
#map-ui a {
font-size:13px;
background:#FFF;
color:#3C4E5A;
display:block;
margin:0;padding:0;
border:1px solid #BBB;
border-bottom-width:0;
min-width:138px;
padding:10px;
text-decoration:none;
}
#map-ui a:hover { background:#ECF5FA; }
#map-ui li:last-child a {
border-bottom-width:1px;
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}
#map-ui li:first-child a {
-webkit-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
}
#map-ui a.active {
background:#3887BE;
border-color:#3887BE;
color:#FFF;
}
</style>
<div id='map-ui'>
<ul>
<li><a href='#' id='orange'>orange</a></li>
</ul>
</div>
<div id='map'></div>
<script>
var map = mapbox.map('map');
map.addLayer(mapbox.layer().id('examples.map-zr0njcqy'));
var markersLayer = mapbox.markers.layer().features([{
"geometry": { "type": "Point", "coordinates": [-77.007185, 38.894791]},
"properties": {
"marker-color": "#2b4dcd",
"marker-symbol": "circle",
"title": "Blue",
"id": "0001"
}
},
{
"geometry": { "type": "Point", "coordinates": [-77.012169, 38.894791]},
"properties": {
"marker-color": "#ed8f08",
"marker-symbol": "circle",
"title": "Orange",
"id": "tickets-orange"
}
},
{
"geometry": { "type": "Point", "coordinates": [-77.015173, 38.894791]},
"properties": {
"marker-color": "#f0e808",
"marker-symbol": "circle",
"title": "Yellow",
"id": "tickets-yellow"
}
},
{
"geometry": { "type": "Point", "coordinates": [-77.009055,38.886024]},
"properties": {
"marker-color": "#c23b3f",
"marker-symbol": "circle",
"title": "red",
"id": "tickets-red"
}
},
{
"geometry": { "type": "Point", "coordinates": [-77.013645,38.885047]},
"properties": {
"marker-color": "#279609",
"marker-symbol": "circle",
"title": "Green",
"id": "tickets-green"
}
},
{
"geometry": { "type": "Point", "coordinates": [-77.015213,38.886042]},
"properties": {
"marker-color": "#ac7d18",
"marker-symbol": "circle",
"title": "Gold",
"id": "tickets-gold"
}
}]);
document.getElementById('orange').onclick = function() {
var ll;
markersLayer.filter(function(f) {
if (f.properties.id === 'tickets-orange') {
ll = f.geometry.coordinates;
return true;
}
});
console.log(ll);
return false;
};
map.zoom(14).center({ lon: -77.015213, lat: 38.886042 });
map.addLayer(markersLayer);
// Attribute map
map.ui.attribution.add()
.content('<a href="http://mapbox.com/about/maps">Terms &amp; Feedback</a>');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment