2013-05-27 20:45:59 +00:00
< html >
< head >
2014-07-30 02:10:52 +00:00
< title > NYC Bookstores< / title >
2013-05-27 20:45:59 +00:00
2015-03-08 18:37:54 +00:00
< meta charset = 'utf-8' >
< script type = "text/javascript" src = 'js/jquery.js ' > < / script >
< script type = "text/javascript" src = 'js/sheetsee.js' > < / script >
2015-04-04 21:43:50 +00:00
< link rel = "shortcut icon" href = "favicon.png" / >
2013-05-27 20:45:59 +00:00
2015-03-08 18:37:54 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< link href = 'http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel = 'stylesheet' / >
< link rel = 'stylesheet' type = 'text/css' href = 'http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic' >
< 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" >
< / head >
2013-05-27 20:45:59 +00:00
< 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 >
2014-07-30 02:10:52 +00:00
< li > < a href = "http://www.github.com/deltamualpha/nyc-bookstores" target = "_blank" > GITHUB< / a > -< / li >
2014-08-17 23:54:17 +00:00
< li > < a href = "http://www.twitter.com/alazyreader" target = "_blank" > @alazyreader< / 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 >
2014-08-17 23:54:17 +00:00
< div id = "info" class = "container" >
< p > Although the bookselling community of New York City is much depleted from its heyday, there still are independent bookstores out there. Unfortunately, there has also been a lack of resources available to discover and visit the stores that do exist. This site, while not on the level of the old guides, can help with that.< / p >
< p > While the data here are kept up-to-date to the best of my ability, I make no promises about the accuracy of locations or other details presented. If you spot an error, or I've missed a shop, please let me know by < a href = "mailto:delta.mu.alpha@gmail.com" > email< / a > or < a href = "https://www.twitter.com/alazyreader" > twitter< / a > . Powered by < a href = "http://jlord.github.com/sheetsee.js" target = "_blank" > sheetsee.js< / a > ; based on a project by < a href = "http://www.twitter.com/jllord" target = "_blank" > @jllord< / a > .
< / 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 >
2013-05-27 20:45:59 +00:00
< / div > <!-- end wrapper -->
< script id = "hackSpotsTable" type = "text/html" >
< table >
2014-08-17 23:54:17 +00:00
< tr > < th class = "tHeader" > Name< / th > < th class = "tHeader" > Address< / th > < / tr >
2013-05-27 20:45:59 +00:00
{{#rows}}
2015-04-05 01:03:31 +00:00
< tr id = "{{rowNumber}}" class = "spotRow" > < td > {{name}}< / td > < td > {{address}}, {{city}} < a href = "https://maps.google.com/maps?q={{name}} {{address}},{{city}},NY" target = "_blank" > ↗ < / a > < / td > < / tr >
2013-05-27 20:45:59 +00:00
{{/rows}}
< / table >
< / script >
< script id = "latestSpot" type = "text/html" >
2014-08-17 23:54:17 +00:00
{{#rows}}
< h4 class = "fauxButton" > MOST RECENTLY ADDED< / h4 >
< h2 > {{name}}< / h2 >
< p class = "colorText" > {{address}}< p >
< p class = "colorText" > {{city}}, NY {{#postcode}} {{postcode}} {{/postcode}}< / p >
2015-04-05 01:03:31 +00:00
< p > < a href = "https://maps.google.com/maps?q={{name}} {{address}},{{city}},NY" target = "_blank" > View in Google Maps< / a > < / p >
2014-08-17 23:54:17 +00:00
< ul >
< li > < span class = "category" > Events:< / span > {{events}}
< span class = "category" > Café :< / span > {{cafe}}< / li >
2015-04-05 01:04:20 +00:00
< li > < span class = "category" > Website:< / span > < a href = '{{website}}' target = "_blank" > {{website}}< / a > < / li >
2014-08-17 23:54:17 +00:00
< / ul >
{{#description}}< ul >
< li class = "description" > {{description}}< / li >
< / ul > {{/description}}
{{/rows}}
2013-05-27 20:45:59 +00:00
< / 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-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 >
2014-08-17 23:54:17 +00:00
< p class = "colorText" > {{city}},NY {{#postcode}} {{postcode}} {{/postcode}}< / p >
2015-04-05 01:03:31 +00:00
< p > < a href = "https://maps.google.com/maps?q={{name}} {{address}},{{city}},NY" target = "_blank" > View in Google Maps< / a > < / p >
2013-07-31 07:49:22 +00:00
< ul >
2014-08-17 23:54:17 +00:00
< li > < span class = "category" > Events:< / span > {{events}}
< span class = "category" > Café :< / span > {{cafe}}< / li >
2015-04-05 01:04:20 +00:00
< li > < span class = "category" > Website:< / span > < a href = '{{website}}' target = "_blank" > {{website}}< / a > < / li >
2013-07-31 07:49:22 +00:00
< / ul >
2014-08-17 23:54:17 +00:00
{{#description}}< ul >
< li class = "description" > {{description}}< / li >
< / ul > {{/description}}
2013-07-31 07:49:22 +00:00
{{/rows}}
2013-05-27 20:45:59 +00:00
< / script >
2016-10-02 21:36:28 +00:00
< script type = "text/javascript" >
function showInfo(gData) {
var tableData = gData.slice(0).sort(
function(a, b){
var aname = a.name.toLowerCase();
var bname = b.name.toLowerCase();
return aname === bname ? 0 : +(aname > bname) || -1;
2015-03-08 18:37:54 +00:00
}
2016-10-02 21:36:28 +00:00
);
var tableOptions = {
'data': tableData,
'tableDiv': '#hackSpotsTable',
'filterDiv': '#tableFilter'
};
// make the table, and the search bar
Sheetsee.makeTable(tableOptions);
Sheetsee.initiateTableFilter(tableOptions);
// create geoJSON with coordinates and other
// useful bits from the original data
var optionsJSON = ['name', 'address', 'city', 'rowNumber'];
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON);
// create map, tilelayer (map background), markers and popups
var map = Sheetsee.loadMap('map');
Sheetsee.addTileLayer(map, 'jllord.n7aml2bc');
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, '< h2 > {{ name }}< / h2 > ');
var theLatestSpot = gData[gData.length - 1];
var latestSpot = Sheetsee.ich.latestSpot({
rows: theLatestSpot
});
// set it and pan to it
$('#latestSpot').html(latestSpot);
map.setView([theLatestSpot.lat, theLatestSpot.long], 14);
// when someone clicks on a row, highlight it and re-center the map
$('.spotRow').live('click', function() {
$('.spotRow').removeClass('selectedRow');
var rowNumber = $(this).closest('tr').attr('id');
$('#' + rowNumber).addClass('selectedRow');
var dataElement = Sheetsee.getMatches(gData, rowNumber, 'rowNumber');
var selectedSpot = Sheetsee.ich.selectedSpot({ rows: dataElement });
$('#latestSpot').css('display', 'none');
$('#selectedSpot').html(selectedSpot).css('display', 'inline');
var selectedCoords = [dataElement[0].lat, dataElement[0].long];
map.setView(selectedCoords, 14);
});
// Add click listener to the markerLayer
markerLayer.on('click', function(e) {
// clear any selected rows
$('.spotRow').removeClass('selectedRow');
// get row number of selected marker
var rowNumber = e.layer.feature.opts.rowNumber;
// find that row in the table and make consider it selected
$('#' + rowNumber).addClass('selectedRow');
// using row number, get the data for the selected spot
var dataElement = Sheetsee.getMatches(gData, rowNumber.toString(), 'rowNumber');
// take those details and re-write the selected spot section
var selectedSpot = Sheetsee.ich.selectedSpot({ rows: dataElement });
// center the map on the selected element
map.panTo([dataElement[0].lat, dataElement[0].long]);
// update the spot listing
$('#latestSpot').css('display', 'none');
$('#selectedSpot').html(selectedSpot).css('display', 'inline');
});
// reset the map, zoom out, and recenter on 0,0
$('.resetMap').click(function() {
$('.spotRow').removeClass('selectedRow');
$('#latestSpot').css('display', 'inline');
$('#selectedSpot').css('display', 'none');
map.setView([0, 0], 1);
});
// find total number of spots added
$('#theNumberofSpots').html(Sheetsee.ich.theNumberofSpots({ numberOfSpots: gData.length }));
if (window.location.hash) {
$('#tableFilter').val(window.location.hash.substring(1)).keyup();
$('.spotRow').first().click();
}
}
document.addEventListener('DOMContentLoaded', function() {
$.getJSON('./stores.json', function(data) {
$.each(data, function(key, value) { value.rowNumber = key; });
showInfo(data);
});
});
$(document).on('keyup', '#tableFilter', function() {
window.location.hash = $(this).val();
$('.spotRow').first().click();
});
< / script >
2013-05-27 20:45:59 +00:00
< / body >
2014-04-10 19:19:24 +00:00
< / html >
