Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created February 4, 2014 01:11
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tmcw/8795728 to your computer and use it in GitHub Desktop.
Save tmcw/8795728 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A Simple Map</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
<style>
#map {
position:absolute;
top:0;left:0;right:0;bottom:0;
}
</style>
<style>
.info {
background:#fff;
position:absolute;
width:260px;
top:10px;
right:10px;
border-radius:2px;
}
.info .item {
display:block;
border-bottom:1px solid #eee;
padding:10px;
text-decoration:none;
}
.info .item small { color:#888; }
.info .item:hover,
.info .item.active { background:#f8f8f8; }
.info .item:last-child { border-bottom:none; }
</style>
<div id='map' class='map'></div>
<div id='info' class='info'></div>
<script>
var map = L.mapbox.map('map', 'examples.h186knp8').setView([37.9, -77], 6);
map.featureLayer.setGeoJSON([
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-77, 37.9]
},
properties: {
title: 'Marker one',
description: 'This marker has a description',
'marker-id': 'marker-1',
'marker-color': '#f86767'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-78, 36.5]
},
properties: {
title: 'Marker two',
description: 'So does this one!',
'marker-id': 'marker-2',
'marker-color': '#f86767'
}
}
]);
var info = document.getElementById('info');
map.featureLayer.eachLayer(function(marker) {
var link = info.appendChild(document.createElement('a'));
link.className = 'item';
link.href = '#';
link.innerHTML = marker.feature.properties.title +
'<br /><small>' + marker.feature.properties.description + '</small>';
link.onclick = function() {
if (/active/.test(this.className)) {
this.className = this.className.replace(/active/, '').replace(/\s\s*$/, '');
} else {
var siblings = info.getElementsByTagName('a');
for (var i = 0; i < siblings.length; i++) {
siblings[i].className = siblings[i].className
.replace(/active/, '').replace(/\s\s*$/, '');
};
this.className += ' active';
map.panTo(marker.getLatLng());
marker.openPopup();
}
return false;
};
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment