lqb2/Coffee Shops for the People.gsheet

## Coffee Shops for the People.gsheet
{"url": "https://docs.google.com/spreadsheets/d/1HZuU5cKp8FUg6nJyX6Ul4x9gPTQM5o63vlQ29zwX34w/edit?usp=docslist_api", "resource_id": "spreadsheet:1HZuU5cKp8FUg6nJyX6Ul4x9gPTQM5o63vlQ29zwX34w"}

## coffee_marker.ai

      
    Raw
  

              coffee_marker.ai
            
          
            View raw
        
    
## coffee_marker.png

      
    Raw
  

              coffee_marker.png
            
          
## coffee_shop_test.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              coffee_shop_test.geojson
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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>


## initial_coffee_shops.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              initial_coffee_shops.geojson
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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>

## marker.png

      
    Raw
  

              marker.png
            
          
## notes.txt
ideas:
 + table size
 + access to space for storing your shit (briefcase, luggage, etc)
 + prioritizing locations for proximity

## store-locator-final.zip

      
    Raw
  

              store-locator-final.zip
            
          
            View raw
        
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<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>
	<?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>
	ideas:
	+ table size
	+ access to space for storing your shit (briefcase, luggage, etc)
	+ prioritizing locations for proximity