2013-05-27 20:45:59 +00:00
< html >
< head >
2014-07-30 02:10:52 +00:00
< title > NYC Bookstores< / title >
2014-06-28 22:26:30 +00:00
< script type = "text/javascript" src = "js/ICanHaz.js" > < / script >
2013-10-29 02:11:31 +00:00
< script type = "text/javascript" src = 'http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js' > < / script >
2013-07-30 17:48:52 +00:00
< script type = "text/javascript" src = 'js/jquery.js ' > < / script >
2014-06-28 22:26:30 +00:00
< script type = "text/javascript" src = 'js/tabletop1.3.4.js' > < / script >
2013-05-27 20:45:59 +00:00
< script type = "text/javascript" src = 'js/sheetsee.js' > < / script >
2013-10-06 22:24:20 +00:00
< script type = "text/javascript" src = 'js/leaflet.markercluster.js' > < / script >
2013-05-28 02:29:51 +00:00
< link rel = "shortcut icon" href = "https://raw.github.com/jlord/hack-spots/master/favico.png" / >
2013-05-27 20:45:59 +00:00
2013-10-06 22:24:20 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2013-10-29 02:11:31 +00:00
< link href = 'http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel = 'stylesheet' / >
2013-10-06 22:24:20 +00:00
< link rel = 'stylesheet' type = 'text/css' href = 'http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic' >
2014-06-28 22:26:30 +00:00
< link rel = 'stylesheet' type = 'text/css' href = 'http://fonts.googleapis.com/css?family=Amatic+SC:400,700' >
< link media = "screen" rel = "stylesheet" type = "text/css" href = "css/style.css" >
< link media = "screen" rel = "stylesheet" type = "text/css" href = "css/site.css" >
2013-10-06 22:24:20 +00:00
< link rel = "stylesheet" href = "css/MarkerCluster.css" / >
< link rel = "stylesheet" href = "css/MarkerCluster.Default.css" / >
2013-05-27 20:45:59 +00:00
< / head >
< body >
< div id = "wrapper" >
2014-07-30 02:10:52 +00:00
< h1 > NYC Bookstores< / h1 >
2013-05-28 01:35:21 +00:00
< div >
< ul class = "nav" >
2014-07-30 02:10:52 +00:00
< li > < strong > The Many Bookstores of New York City< / strong > < / li >
2013-05-28 01:35:21 +00:00
< li > < a href = "#info" > INFO< / a > -< / li >
< li > < a href = "http://jlord.github.com/sheetsee.js" target = "_blank" > POWERED BY SHEETSEE.JS< / a > -< / li >
2014-07-30 02:10:52 +00:00
< li > < a href = "http://www.github.com/deltamualpha/nyc-bookstores" target = "_blank" > GITHUB< / a > -< / li >
< li > < a href = "http://www.twitter.com/alazyreader" target = "_blank" > @alazyreader< / a > -< / li >
< li > Based on a project by < a href = "http://www.twitter.com/jllord" target = "_blank" > @JLLORD< / a > < / li >
2013-05-28 01:35:21 +00:00
< / ul >
< / div >
< div class = "container" >
< div id = "rightSide" >
< div id = "latestSpot" > < / div >
< div id = "selectedSpot" > < / div >
< / div >
2013-05-27 20:45:59 +00:00
< div id = "map" > < / div >
< / div >
2013-05-28 01:35:21 +00:00
< div class = "container" >
< input id = "tableFilter" type = "text" placeholder = "filter by.." > < / input >
< span class = "clear button" > Clear< / span > < span class = "resetMap button" > Reset Map< / span >
< span class = "noMatches" > no matches< / span >
< div id = "hackSpotsTable" > < / div >
< / div >
< div id = "info" class = "container" >
< h3 > Info< / h3 >
2014-07-30 02:10:52 +00:00
< p > I love bookstores. And I love New York City. And I love silly projects. So I decided to combine all three into one: this website. Based on the fantastic < a href = "https://github.com/jlord/hack-spots" target = "_blank" > hack-spots< / a > from < a href = "http://www.twitter.com/jllord" target = "_blank" > jllord< / a > , this website takes bookstore data from a Google spreadsheet and maps it all out, with details.< / p >
2013-05-28 01:35:21 +00:00
< / div >
2013-05-27 20:45:59 +00:00
< / div > <!-- end wrapper -->
< script id = "hackSpotsTable" type = "text/html" >
< table >
2014-07-30 02:10:52 +00:00
< tr > < th class = "tHeader" > Name< / th > < th class = "tHeader" > Address< / th > < th class = "tHeader" > City< / th > < th class = "tHeader" > State< / th > < th class = "tHeader" > Country< / th > < th class = "" > Google Map< / th > < / tr >
2013-05-27 20:45:59 +00:00
{{#rows}}
2014-07-30 02:10:52 +00:00
< tr id = "{{rowNumber}}" class = "spotRow" > < td > {{name}}< / td > < td > {{address}}< / td > < td > {{city}}< / td > < td > {{state}}< / td > < td > {{country}}< / td > < td > < a class = "button" href = "https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target = "_blank" > G Map< / a > < / td > < / tr >
2013-05-27 20:45:59 +00:00
< tr class = "hideRow" > < td > wifi: {{wifipassword}}< / td > < / tr >
{{/rows}}
< / table >
< / script >
< script id = "latestSpot" type = "text/html" >
{{#rows}}
2014-07-30 02:10:52 +00:00
< h4 class = "fauxButton" > MOST RECENTLY ADDED< / h4 >
2013-05-28 01:35:21 +00:00
< h2 > {{name}}< / h2 >
2013-07-31 18:54:58 +00:00
< p class = "colorText" > {{address}}< p >
2013-10-31 11:27:29 +00:00
< p class = "colorText" > {{city}}, {{state}} {{#postcode}}, {{postcode}} {{/postcode}}< / p >
2013-05-27 20:45:59 +00:00
< ul >
2013-05-28 01:35:21 +00:00
< li > < span class = "category" > Outlets:< / span > {{outlets}}< / li >
2014-07-30 02:10:52 +00:00
< li > < span class = "category" > Couches:< / span > {{couch}}< / li >
< li > < span class = "category" > Café :< / span > {{cafe}}< / li >
< li > < span class = "category" > Website:< / span > < a href = '{{website}}' > {{website}}< / a > < / li >
2013-05-28 01:35:21 +00:00
< / ul >
< ul >
< li > < a href = "https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target = "_blank" > View in Google Maps< / a > < / li >
2013-05-27 20:45:59 +00:00
< / ul >
{{/rows}}
< / script >
2013-07-31 07:49:22 +00:00
< script id = "theNumberofSpots" type = "text/html" >
2014-07-30 02:10:52 +00:00
< p > < strong > < span class = "red-text" > {{numberOfSpots}}< / span > bookstores mapped!< / p >
2013-07-31 07:49:22 +00:00
< / script >
2013-10-29 01:58:43 +00:00
< script id = "popUps" type = "text/html" >
< h2 > {{ name }}< / h2 >
< / script >
2013-05-27 20:45:59 +00:00
< script id = "selectedSpot" type = "text/html" >
2013-07-31 07:49:22 +00:00
{{#rows}}
2014-07-30 02:10:52 +00:00
< h4 class = "fauxButton" > SELECTED BOOKSTORE< / h4 >
2013-07-31 07:49:22 +00:00
< h2 > {{name}}< / h2 >
2013-07-31 20:44:01 +00:00
< p class = "colorText" > {{address}}< p >
2013-10-31 11:27:29 +00:00
< p class = "colorText" > {{city}}, {{state}} {{#postcode}}, {{postcode}} {{/postcode}}< / p >
2013-07-31 07:49:22 +00:00
< ul >
< li > < span class = "category" > Outlets:< / span > {{outlets}}< / li >
2014-07-30 02:10:52 +00:00
< li > < span class = "category" > Couches:< / span > {{couch}}< / li >
< li > < span class = "category" > Café :< / span > {{cafe}}< / li >
< li > < span class = "category" > Website:< / span > < a href = '{{website}}' > {{website}}< / a > < / li >
2013-07-31 07:49:22 +00:00
< / ul >
< ul >
< li > < a href = "https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target = "_blank" > View in Google Maps< / a > < / li >
< / ul >
{{/rows}}
2013-05-27 20:45:59 +00:00
< / script >
< script type = "text/javascript" >
2013-07-31 23:41:47 +00:00
document.addEventListener('DOMContentLoaded', function() {
var gData
2014-04-10 19:25:16 +00:00
// var URL = "10z-2P8l88hLF35EodIjigs5cyCD7BtmfZS631JMtIUU" // test new spreadsheets
2014-06-29 13:51:06 +00:00
var URL = "0AnhMurQVK5pqdHU0UF9QTFRRNTQwR3hQTFdOV3laRGc"
2014-06-28 22:26:30 +00:00
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
2013-07-31 23:41:47 +00:00
// so long, so messy
2014-06-28 22:26:30 +00:00
function showInfo(gData) {
gData
2013-07-31 23:41:47 +00:00
// make the table, and the search bar
Sheetsee.makeTable(gData, "#hackSpotsTable")
Sheetsee.initiateTableFilter(gData, "#tableFilter", "#hackSpotsTable")
// when someone clicks on a row, highlight it and
// re-center the map
$('.spotRow').live("click", function(event) {
$('.spotRow').removeClass("selectedRow")
var rowNumber = $(this).closest("tr").attr("id")
$('#' + rowNumber).addClass("selectedRow")
var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
var selectedSpot = ich.selectedSpot({
rows: dataElement
})
$('#latestSpot').css("display", "none")
$('#selectedSpot').html(selectedSpot).css("display", "inline")
var selectedCoords = [dataElement[0].lat, dataElement[0].long]
matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
addPopups(map, markerLayer)
map.panTo(selectedCoords, 13)
})
// so that the first map and info that loads
// is complete and doesn't show rows that are
// actively being edited by folk
function findLatestCompleteSpot(data) {
var latestCompleteSpot = []
var startWithLatestRow = data.reverse()
startWithLatestRow.forEach(function(row){
if (!row.lat || !row.long || !row.name || !row.address || !row.city || !row.state ) return
2014-06-28 22:26:30 +00:00
else latestCompleteSpot.push(row)
2013-07-31 23:41:47 +00:00
})
return latestCompleteSpot[0]
}
// find the latest spot with the most important
// info filled in (to prevent map breaking if
// someone is currently editing spreadsheet)
var theLatestSpot = findLatestCompleteSpot(gData)
var latestSpot = ich.latestSpot({
rows: theLatestSpot
2013-05-29 03:05:54 +00:00
})
2013-07-31 23:41:47 +00:00
$('#latestSpot').html(latestSpot)
function highlightLastMarker(geoJSON, highlightColor) {
geoJSON[0].properties["marker-color"] = highlightColor
return geoJSON
}
// create geoJSON with coordinates and other
// useful bits from the original data
var optionsJSON = ["name", "address", "city", "rowNumber"]
var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
// change the color of the most recently added spot's marker
var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
2014-06-28 22:26:30 +00:00
2013-07-31 23:41:47 +00:00
// create map, tilelayer (map background), markers and popups
var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
2013-05-29 03:05:54 +00:00
addPopups(map, markerLayer)
2013-07-31 23:41:47 +00:00
// design the popups to have the content and
// interactions that we want
function addPopups(map, markerLayer) {
2013-10-29 01:50:49 +00:00
markerLayer.eachLayer(function(marker) {
2013-10-29 01:58:43 +00:00
var popupContent = ich.popUps(marker.feature.opts)
2013-10-29 01:50:49 +00:00
marker.bindPopup(popupContent, {closeButton: false,})
})
2013-07-31 23:41:47 +00:00
markerLayer.on('click', function(e) {
2014-06-28 22:26:30 +00:00
// clear any selected rows
2013-07-31 23:41:47 +00:00
$('.spotRow').removeClass("selectedRow")
// get row number of selected marker
var rowNumber = e.layer.feature.opts.rowNumber.toString()
// find that row in the table and make consider it selected
$('#' + rowNumber).addClass("selectedRow")
// using row number, find that marker in the geoJSON, give it
// the selected marker color
matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
// var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
// addPopups(map, markerLayer)
// using row number, get the data for the selected spot
var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
// take those details and re-write the selected spot section
var selectedSpot = ich.selectedSpot({
rows: dataElement
2014-06-28 22:26:30 +00:00
})
2013-07-31 23:41:47 +00:00
$('#latestSpot').css("display", "none")
$('#selectedSpot').html(selectedSpot).css("display", "inline")
})
}
$('.resetMap').click(function() {
2013-05-29 03:05:54 +00:00
$('.spotRow').removeClass("selectedRow")
2013-07-31 23:41:47 +00:00
markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
2013-05-29 03:05:54 +00:00
addPopups(map, markerLayer)
2013-07-31 23:41:47 +00:00
$('#latestSpot').css("display", "inline")
$('#selectedSpot').css("display", "none")
})
// find total number of spots added
var numberOfSpots = gData.length
var theNumberofSpots = ich.theNumberofSpots({
numberOfSpots: numberOfSpots
})
$('#theNumberofSpots').html(theNumberofSpots)
function matchGeoJSONbyRowNumber(rowNumber, geoJSON, gdata, highlightColor) {
geoJSON.forEach(function (d) {
if (d.properties["marker-color"] === highlightColor) {
var origColor = gData[0].hexcolor
d.properties["marker-color"] = origColor
}
for (var key in d.opts) {
var value = d.opts[key].toString().toLowerCase()
if (key === 'rowNumber' & & value.match(rowNumber.toString().toLowerCase())) {
d.properties["marker-color"] = highlightColor
return geoJSON
}
}
})
}
2013-05-29 03:05:54 +00:00
}
2013-05-28 03:21:00 +00:00
2013-05-27 20:45:59 +00:00
< / script >
< / body >
2014-04-10 19:19:24 +00:00
< / html >
