Skip to content

Instantly share code, notes, and snippets.

@lqb2

lqb2/Coffee Shops for the People.gsheet

Last active August 29, 2015 14:08
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 lqb2/5489786c99e21cffc85d to your computer and use it in GitHub Desktop.
Save lqb2/5489786c99e21cffc85d to your computer and use it in GitHub Desktop.
Download ZIP
Coffeeshops for the People
Raw
Coffee Shops for the People.gsheet
{"url": "https://docs.google.com/spreadsheets/d/1HZuU5cKp8FUg6nJyX6Ul4x9gPTQM5o63vlQ29zwX34w/edit?usp=docslist_api", "resource_id": "spreadsheet:1HZuU5cKp8FUg6nJyX6Ul4x9gPTQM5o63vlQ29zwX34w"}
Display the source blob
Display the rendered blob
Raw
coffee_shop_test.geojson
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.120681,
42.37356
]
},
"properties": {
"name": "Crema Cafe",
"wifiQuality": "Unknown",
"wifiCost": "Free",
"standingWorkspace": "Yes",
"accessToOutlets": "Acceptable",
"notes": ""
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.096661,
42.360945
]
},
"properties": {
"name": "Flour",
"wifiQuality": "***",
"wifiCost": "Free",
"standingWorkspace": "Yes",
"accessToOutlets": "Poor",
"notes": "Wifi password is store phone number"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.0933917,
42.3594336
]
},
"properties": {
"name": "Rotch Library (MIT)",
"wifiQuality": "*****",
"wifiCost": "Free",
"standingWorkspace": "Yes",
"accessToOutlets": "Great",
"notes": ""
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.0894662,
42.3589601
]
},
"properties": {
"name": "Hayden Library (MIT)",
"wifiQuality": "*****",
"wifiCost": "Free",
"standingWorkspace": "No",
"accessToOutlets": "Great",
"notes": ""
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.121716,
42.374944
]
},
"properties": {
"name": "Gutman Library (Harvard)",
"wifiQuality": "*****",
"wifiCost": "Free",
"standingWorkspace": "Yes",
"accessToOutlets": "Great",
"notes": ""
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.104452,
42.370487
]
},
"properties": {
"name": "Dwelltime",
"wifiQuality": "****",
"wifiCost": "Free",
"standingWorkspace": "Yes",
"accessToOutlets": "Poor",
"notes": ""
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.110734,
42.369355
]
},
"properties": {
"name": "Simon's Too",
"wifiQuality": "***",
"wifiCost": "Free",
"standingWorkspace": "Yes",
"accessToOutlets": "Poor",
"notes": "Wi-fi pass: espresso"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.122472,
42.342126
]
},
"properties": {
"name": "Temptation's Cafe",
"wifiQuality": "?",
"wifiCost": "Free",
"standingWorkspace": "Yes",
"accessToOutlets": "?",
"notes": "Wi-fi pass: 6666666666"
}
}
]
}
Raw
index.html
<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>
Display the source blob
Display the rendered blob
Raw
initial_coffee_shops.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
Maki | A clean point of interest icon set from MapBox | Mapbox.webloc
<?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>
Raw
notes.txt
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