Last active
August 29, 2015 14:08
-
-
Save lqb2/5489786c99e21cffc85d to your computer and use it in GitHub Desktop.
Coffeeshops for the People
This file contains 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
{"url": "https://docs.google.com/spreadsheets/d/1HZuU5cKp8FUg6nJyX6Ul4x9gPTQM5o63vlQ29zwX34w/edit?usp=docslist_api", "resource_id": "spreadsheet:1HZuU5cKp8FUg6nJyX6Ul4x9gPTQM5o63vlQ29zwX34w"} |
This file contains 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
<html> | |
<head> | |
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet'> | |
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' /> | |
<style> | |
/* CSS */ | |
body { | |
background:#f8f8f8; | |
color:#000; | |
font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif; | |
margin:0; | |
padding:0; | |
-webkit-font-smoothing:antialiased; | |
} | |
/** | |
* The page is split between map and sidebar - the sidebar gets 1/3, map | |
* gets 2/3 of the page. You can adjust this to your personal liking. | |
*/ | |
.sidebar { | |
width:33.3333%; | |
} | |
h1 { | |
font-size:22px; | |
margin:10; | |
margin-bottom: 20; | |
font-weight:400; | |
} | |
a { | |
text-decoration:none; | |
} | |
.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:#A18136; | |
font-weight:700; | |
} | |
.listings .item .title small { font-weight:400; } | |
.listings .item.active .title, | |
.listings .item .title:hover { color:#543E1C; } | |
.listings .item.active { | |
background-color:#efefef; | |
} | |
.map { | |
border-left:1px solid #fff; | |
position:absolute; | |
left:33.3333%; | |
width:66.6666%; | |
top:0; | |
bottom:0; | |
} | |
.pad20 { | |
padding:20px; | |
-webkit-box-sizing:border-box; | |
-moz-box-sizing:border-box; | |
box-sizing:border-box; | |
} | |
/* Marker tweaks */ | |
.leaflet-popup-close-button { | |
display:none; | |
} | |
.leaflet-popup-content { | |
font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif; | |
padding:0px; | |
width:200px; | |
} | |
.leaflet-popup-content-wrapper { | |
padding:0; | |
} | |
.leaflet-popup-content h3 { | |
background:#543E1C; | |
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; } | |
</style> | |
</head> | |
<body> | |
<div class='sidebar pad20'> | |
<div class='heading'> | |
<h1>Coffee Shops for the People</h1> | |
</div> | |
<div id='listings' class='listings'></div> | |
</div> | |
<div id='map' class='map pad20'>Map</div> | |
<script> | |
var coffeeData = 'coffee_shop_test.geojson'; | |
L.mapbox.accessToken = 'pk.eyJ1IjoibHFiMiIsImEiOiJZMlowSHZFIn0._9bYohJZDwa4WA9mcuT0Zg'; | |
var map = L.mapbox.map('map', 'lqb2.k0cgg1h0'); | |
var locations = L.mapbox.featureLayer().addTo(map); | |
locations.loadURL(coffeeData); | |
var listings = document.getElementById('listings'); | |
function setActive(el) { | |
var siblings = listings.getElementsByTagName('div'); | |
for (var i = 0; i < siblings.length; i++) { | |
siblings[i].className = siblings[i].className | |
.replace(/active/, '').replace(/\s\s*$/, ''); | |
} | |
el.className += ' active'; | |
} | |
locations.on('ready', function() { | |
// Iterate over each marker | |
locations.eachLayer(function(locale) { | |
// Shorten locale.feature.properties to just `prop` so we're not | |
// writing this long form over and over again. | |
var prop = locale.feature.properties; | |
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.name; | |
var popup = '<h3>' + prop.name + '</h3><div>'; | |
popup += '<small><b>Wifi Cost</b>: ' + prop.wifiCost + '</small>'; | |
var details = listing.appendChild(document.createElement('div')); | |
details.innerHTML += '<small><b>Wifi Cost</b>: ' + prop.wifiCost + '</small>'; | |
details.innerHTML += '<small><br /><b>Wifi Quality</b>: ' + prop.wifiQuality + '</small>'; | |
details.innerHTML += '<small><br /><b>Standing Workspaces?</b>: ' + prop.standingWorkspace + '</small>'; | |
details.innerHTML += '<small><br /><b>Access to outlets</b>: ' + prop.accessToOutlets + '</small>'; | |
if (prop.notes) { | |
details.innerHTML += '<small><br /><b>Notes</b>: ' + prop.notes + '</small>'; | |
} | |
// Menu item interaction | |
link.onclick = function() { | |
// 1. Toggle an active class for `listing`. View the source in the demo link for example. | |
setActive(listing); | |
// 2. When a menu item is clicked, animate the map to center | |
// its associated locale and open its popup. | |
map.setView(locale.getLatLng(), 16); | |
locale.openPopup(); | |
return false; | |
} | |
// Marker interaction | |
locale.on('click', function(e) { | |
// 1. center the map on the selected marker. | |
map.panTo(locale.getLatLng()); | |
// 2. Set active the markers associated listing. | |
setActive(listing); | |
}); | |
popup += '</div>'; | |
locale.bindPopup(popup); | |
}) | |
}); | |
locations.on('layeradd', function(e) { | |
var marker = e.layer; | |
marker.setIcon(L.icon({ | |
iconUrl: 'coffee_marker.png', | |
iconSize: [25, 36], | |
iconAnchor: [28, 28], | |
popupAnchor: [-16, -30] | |
})); | |
}); | |
</script> | |
</body> | |
</html> | |
This file contains 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
<?xml version="1.0" encoding="UTF-8"?> | |
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> | |
<plist version="1.0"> | |
<dict> | |
<key>URL</key> | |
<string>https://www.mapbox.com/maki/</string> | |
</dict> | |
</plist> |
This file contains 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
ideas: | |
+ table size | |
+ access to space for storing your shit (briefcase, luggage, etc) | |
+ prioritizing locations for proximity |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment