Map
var locations = L.mapbox.featureLayer().addTo(map);
locations.setGeoJSON(geojson);
locations.eachLayer(function(locale) {
});
});
body {
color:#404040;
font:400 15px/22px 'Helvetica Neue', Sans-serif;
margin:0;
padding:0;
-webkit-font-smoothing:antialiased;
}
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
h1 {
font-size:22px;
margin:0;
font-weight:400;
}
a {
color:#404040;
text-decoration:none;
}
a:hover { color:#101010; }
.sidebar {
position:absolute;
width:33.3333%;
height:100%;
top:0;left:0;
overflow:hidden;
border-right:1px solid rgba(0,0,0,0.25);
}
.pad2 {
padding:20px;
}
.quiet {
color:#888;
}
.map {
position:absolute;
left:33.3333%;
width:66.6666%;
top:0;bottom:0;
}
.heading {
background:#fff;
border-bottom:1px solid #eee;
height:60px;
line-height:60px;
padding:0 10px;
}
.listings {
height:100%;
overflow:auto;
padding-bottom:60px;
}
.listings .item {
display:block;
border-bottom:1px solid #eee;
padding:10px;
text-decoration:none;
}
.listings .item:last-child { border-bottom:none; }
.listings .item .title {
display:block;
color:#00853e;
font-weight:700;
}
.listings .item .title small { font-weight:400; }
.listings .item.active .title,
.listings .item .title:hover { color:#8cc63f; }
.listings .item.active {
background-color:#f8f8f8;
}
::-webkit-scrollbar {
width:3px;
height:3px;
border-left:0;
background:rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
background:none;
}
::-webkit-scrollbar-thumb {
background:#00853e;
border-radius:0;
}
.clearfix { display:block; }
.clearfix:after {
content:'.';
display:block;
height:0;
clear:both;
visibility:hidden;
}
.leaflet-popup-close-button {
display:none;
}
.leaflet-popup-content {
font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
padding:0;
width:200px;
}
.leaflet-popup-content-wrapper {
padding:0;
}
.leaflet-popup-content h3 {
background:#91c949;
color:#fff;
margin:0;
display:block;
padding:10px;
border-radius:3px 3px 0 0;
font-weight:700;
margin-top:-15px;
}
.leaflet-popup-content div {
padding:10px;
}
.leaflet-container .leaflet-marker-icon { cursor:pointer; }
var listings = document.getElementById('listings');
var locations = L.mapbox.featureLayer().addTo(map);
locations.setGeoJSON(geojson);
function setActive(el) {
var siblings = listings.getElementsByTagName('div');
(var i = 0; i siblings.length; i) {
siblings[i].className = siblings[i].className
.replace(/active/, '').replace(/\s\s*$/, '');
}
el.className += ' active';
}
locations.eachLayer(function(locale) {
var prop = locale.feature.properties;
var popup = 'Sweetgreen
' + prop.address;
var listing = listings.appendChild(document.createElement('div'));
listing.className = 'item';
var link = listing.appendChild(document.createElement('a'));
link.href = '#';
link.className = 'title';
link.innerHTML = prop.address;
if (prop.crossStreet) {
link.innerHTML += '
' + prop.crossStreet + '';
popup += '
' + prop.crossStreet + '';
}
var details = listing.appendChild(document.createElement('div'));
details.innerHTML = prop.city;
if (prop.phone) {
details.innerHTML += ' · ' + prop.phoneFormatted;
}
link.onclick = function() {
setActive(listing);
map.setView(locale.getLatLng(), 16);
locale.openPopup();
return false;
};
locale.on('click', function(e) {
map.panTo(locale.getLatLng());
setActive(listing);
});
popup += '
';
locale.bindPopup(popup);
});
locale.setIcon(L.icon({
iconUrl: 'marker.png',
iconSize: [56, 56],
iconAnchor: [28, 28],
popupAnchor: [0, -34]
}));
font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;