alazyreader/nyc-bookstores
1
0
Fork 0
Code Issues 1 Pull Requests 1 Releases Wiki Activity

Compare commits

merge into: alazyreader:main
Branches Tags
alazyreader:main
alazyreader:renovate/node-23.x
alazyreader:new-redesign
...
pull from: alazyreader:new-redesign
Branches Tags
alazyreader:main
alazyreader:renovate/node-23.x
alazyreader:new-redesign

1 Commits
main ... new-redesi

Author SHA1 Message Date
David Ashby
d8a5d93342 new map-focused redesign
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details
2023-10-29 21:34:26 -04:00
2 changed files with 214 additions and 257 deletions
Show Stats Expand all files Collapse all files

97
css/site.css
View File

@ -1,38 +1,33 @@
/* Page Specific CSS */
body { body {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
background: #fff; background: #fff;
color: #333; color: #333;
font-size: 18px; font-size: 16px;
margin: 0px; margin: 0px;
padding: 20px 0px; padding: 0px;
} }
h1 { h1 {
font-size: 80px; font-size: 40px;
font-family: "Acme", sans-serif; font-family: "Acme", sans-serif;
font-weight: normal; font-weight: normal;
margin: 0px; margin: 0px;
} }
h2 { h2 {
font-size: 40px; font-size: 30px;
font-family: "Acme", sans-serif; font-family: "Acme", sans-serif;
font-weight: normal; font-weight: normal;
margin: 0px 0px; margin: 0px 0px;
} }
h3 { h3 {
font-family: "Acme", sans-serif; font-family: "Acme", sans-serif;
font-size: 30px; font-size: 20px;
margin: 10px 0px; margin: 10px 0px;
} }
h4 { h4 {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 24px; font-size: 14px;
} }
img {
width: 100%;
}
p a, p a,
a { a {
color: #333; color: #333;
@ -43,10 +38,6 @@ a {
a:hover { a:hover {
color: #47ccfc; color: #47ccfc;
} }
small {
padding: 10px 0px;
font-size: 10px;
}
p { p {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
@ -56,22 +47,14 @@ li {
line-height: 19px; line-height: 19px;
font-size: 15px; font-size: 15px;
} }
ol {
line-height: 24px;
}
.clearfix {
clear: both;
}
.hidden { .hidden {
display: none; display: none;
} }
#map { #map {
height: 500px; height: 100vh;
width: 480px; width: 100%;
min-width: 300px;
background: #ffffff; background: #ffffff;
float: left;
} }
#map a { #map a {
border: none; border: none;
@ -83,13 +66,19 @@ ol {
} }
#wrapper { #wrapper {
margin: 0px auto; max-width: 500px;
padding: 40px; position: absolute;
max-width: 1000px; top: 10px;
right: 10px;
bottom: 10px;
overflow: scroll;
} }
.container { .bubble {
margin: 24px 0px; background-color: white;
margin: 10px 0px;
padding: 10px;
border-radius: 3px;
} }
ul.nav { ul.nav {
@ -105,7 +94,7 @@ ul.nav li {
} }
ul.nav li:not(:first-child) { ul.nav li:not(:first-child) {
border-left: 1px #333 solid; border-left: 1px #333 solid;
padding-left: 10px; padding-left: 5px;
} }
ul.nav li h2 { ul.nav li h2 {
font-family: "Lato"; font-family: "Lato";
@ -126,15 +115,9 @@ ul.nav li a:hover {
font-weight: 700; font-weight: 700;
} }
#selected {
max-width: 500px;
width: 100%;
float: left;
padding: 5px 10px;
}
#selected .description { #selected .description {
padding-top: 7px;
font-size: 16px; font-size: 16px;
padding: 4px 0px;
line-height: 22px; line-height: 22px;
text-align: justify; text-align: justify;
} }
@ -143,27 +126,17 @@ ul.nav li a:hover {
margin: 15px 0px; margin: 15px 0px;
padding: 0px; padding: 0px;
} }
#info {
max-width: 500px;
width: 100%;
float: left;
padding: 5px 10px;
}
.storeDetails { .storeDetails {
font-size: 15px; font-size: 15px;
display: inline; display: inline;
padding-right: 6px;
} }
#info p { #info p {
font-size: 15px; font-size: 15px;
padding: 4px;
line-height: 22px; line-height: 22px;
text-align: justify; text-align: justify;
} }
#info details { #info details {
font-size: 15px; font-size: 15px;
padding: 4px;
line-height: 22px; line-height: 22px;
text-align: justify; text-align: justify;
} }
@ -174,40 +147,34 @@ ul.nav li a:hover {
#Stores { #Stores {
margin: 0 auto; margin: 0 auto;
width: 80%;
} }
#Stores tr { #Stores tr {
cursor: pointer; cursor: pointer;
} }
#Stores tr td { #Stores tr td {
padding: 4px 10px; padding: 2px 0px;
} }
#Stores tr:not(:last-child) td { #Stores tr:not(:last-child) td {
border-bottom: 1px #ddd solid; border-bottom: 1px #ddd solid;
} }
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1120px) { @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1120px) {
h1 {
font-size: 60px;
}
body {
margin: 0px;
padding: 5px;
}
#wrapper { #wrapper {
max-width: 480px; position: static;
padding-top: 20px; padding: 10px;
}
.bubble {
margin: 0px;
padding: 0px;
border-radius: 0px;
}
#map {
height: 400px;
} }
#Stores, #Stores,
#map {
min-width: 224px;
width: 100%;
}
#map, #map,
#info, #info,
#selected { #selected {
width: 100%; width: 100%;
margin: 10px 0px;
padding: 0;
} }
} }

262
index.html
View File

@ -31,7 +31,7 @@
media="screen" media="screen"
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
href="/css/site.css?1697075405981" href="/css/site.css?1698627633277"
/> />
<meta <meta
property="title" property="title"
@ -66,15 +66,11 @@
/> />
</head> </head>
<body> <body>
<div id="map"></div>
<div id="wrapper"> <div id="wrapper">
<header class="bubble">
<h1>NYC Bookstores</h1> <h1>NYC Bookstores</h1>
<div>
<ul class="nav"> <ul class="nav">
<li>
<h2 id="subhed">
The Many Independent Bookstores of New York City
</h2>
</li>
<li> <li>
<a id="viewInfo" href="#info" onclick="event.preventDefault()" <a id="viewInfo" href="#info" onclick="event.preventDefault()"
>intro</a >intro</a
@ -93,10 +89,8 @@
> >
</li> </li>
</ul> </ul>
</div> </header>
<div class="container"> <div id="info" class="bubble">
<div id="map"></div>
<div id="info">
<p> <p>
New York City loves its independent bookstores. It New York City loves its independent bookstores. It
<a <a
@ -104,8 +98,7 @@
target="_blank" target="_blank"
>eulogizes those that have faded</a >eulogizes those that have faded</a
> >
and celebrates when new ventures are launched. And while the and celebrates when new ventures are launched. And while the historic
historic
<a <a
href="https://untappedcities.com/2015/08/26/4th-avenue-the-history-of-nycs-book-row/" href="https://untappedcities.com/2015/08/26/4th-avenue-the-history-of-nycs-book-row/"
target="_blank" target="_blank"
@ -119,8 +112,8 @@
<p> <p>
While Manhattan and Brooklyn still lead the pack, Queens has a While Manhattan and Brooklyn still lead the pack, Queens has a
respectable number of stores, and all five boroughs are represented, respectable number of stores, and all five boroughs are represented,
with the Bronx and Staten Island both hosting lone independent with the Bronx and Staten Island both hosting lone independent stores.
stores. Lower Manhattan has the highest density of booksellers. Lower Manhattan has the highest density of booksellers.
</p> </p>
<p> <p>
The listings here are kept up-to-date to the best of my ability; The listings here are kept up-to-date to the best of my ability;
@ -143,29 +136,34 @@
survives at this point). survives at this point).
</p> </p>
<p> <p>
There are currently <span id="storeCount">114</span> stores indexed There are currently <span id="storeCount">114</span> stores indexed on
on this page. Last updated this page. Last updated <span id="updatedOn">October 29, 2023</span>.
<span id="updatedOn">October 11, 2023</span>.
</p> </p>
<details> <details>
<summary>Recent Changes</summary> <summary>Recent Changes</summary>
<ul id="changesList"> <ul id="changesList">
<li>October 11, 2023 - add this fancy recent changes module</li>
<li> <li>
October 8, 2023 - move Burnt Books into Hey Kids!, update October 26, 2023 - Return Three Lives to its original corner
archestratus to note there's no cafe anymore location.
</li>
<li>
October 26, 2023 - Idlewild Books appears to have transitioned
entirely to language classes as opposed to bookselling
</li>
<li>
October 26, 2023 - remove Boulevard Books; correct Alabaster
Bookshop Instagram link
</li>
<li>
October 26, 2023 - Add Topos Too, currently in a "soft opening"
</li> </li>
<li>September 30, 2023 - add Lofty Pigeon Books</li>
<li>September 19, 2023 - Move Yu and Me to Essex Market</li>
</ul> </ul>
</details> </details>
</div> </div>
<div id="selected"></div>
</div>
<div class="clearfix"></div> <div id="selected" class="bubble hidden"></div>
<div class="container"> <div class="bubble">
<div id="Stores"> <div id="Stores">
<table> <table>
<tbody> <tbody>
@ -179,7 +177,7 @@
</tr> </tr>
<tr id="2" class="spotRow"> <tr id="2" class="spotRow">
<td class="name">Adanne</td> <td class="name">Adanne</td>
<td>234 Water St, Brooklyn</td> <td>115 Ralph Ave, Brooklyn</td>
</tr> </tr>
<tr id="3" class="spotRow"> <tr id="3" class="spotRow">
<td class="name">Aeon Bookstore</td> <td class="name">Aeon Bookstore</td>
@ -278,335 +276,335 @@
<td>42 West 17th St, New York</td> <td>42 West 17th St, New York</td>
</tr> </tr>
<tr id="27" class="spotRow"> <tr id="27" class="spotRow">
<td class="name">Boulevard Books</td>
<td>7518 13th Ave, Brooklyn</td>
</tr>
<tr id="28" class="spotRow">
<td class="name">Bravo's Book Nook</td> <td class="name">Bravo's Book Nook</td>
<td>115 MacDougal St, New York</td> <td>115 MacDougal St, New York</td>
</tr> </tr>
<tr id="29" class="spotRow"> <tr id="28" class="spotRow">
<td class="name">Burnt Books</td> <td class="name">Burnt Books</td>
<td>157 Huron St, Brooklyn</td> <td>157 Huron St, Brooklyn</td>
</tr> </tr>
<tr id="30" class="spotRow"> <tr id="29" class="spotRow">
<td class="name">Cafe con Libros</td> <td class="name">Cafe con Libros</td>
<td>724 Prospect Place, Brooklyn</td> <td>724 Prospect Place, Brooklyn</td>
</tr> </tr>
<tr id="31" class="spotRow"> <tr id="30" class="spotRow">
<td class="name">Catland</td> <td class="name">Catland</td>
<td>985 Flushing Ave, Brooklyn</td> <td>985 Flushing Ave, Brooklyn</td>
</tr> </tr>
<tr id="32" class="spotRow"> <tr id="31" class="spotRow">
<td class="name">Chartwell Booksellers</td> <td class="name">Chartwell Booksellers</td>
<td>55 E 52nd St, New York</td> <td>55 E 52nd St, New York</td>
</tr> </tr>
<tr id="33" class="spotRow"> <tr id="32" class="spotRow">
<td class="name">Codex Books</td> <td class="name">Codex Books</td>
<td>1 Bleecker St, New York</td> <td>1 Bleecker St, New York</td>
</tr> </tr>
<tr id="34" class="spotRow"> <tr id="33" class="spotRow">
<td class="name">Community Bookstore</td> <td class="name">Community Bookstore</td>
<td>143 7th Ave, Brooklyn</td> <td>143 7th Ave, Brooklyn</td>
</tr> </tr>
<tr id="35" class="spotRow"> <tr id="34" class="spotRow">
<td class="name">Cups and Books</td> <td class="name">Cups and Books</td>
<td>2024 Bedford Ave, Brooklyn</td> <td>2024 Bedford Ave, Brooklyn</td>
</tr> </tr>
<tr id="36" class="spotRow"> <tr id="35" class="spotRow">
<td class="name">Dashwood Books</td> <td class="name">Dashwood Books</td>
<td>33 Bond St, New York</td> <td>33 Bond St, New York</td>
</tr> </tr>
<tr id="37" class="spotRow"> <tr id="36" class="spotRow">
<td class="name">Dear Friend Books</td> <td class="name">Dear Friend Books</td>
<td>343A Tompkins Ave, Brooklyn</td> <td>343A Tompkins Ave, Brooklyn</td>
</tr> </tr>
<tr id="38" class="spotRow"> <tr id="37" class="spotRow">
<td class="name">Desert Island Comics</td> <td class="name">Desert Island Comics</td>
<td>540 Metropolitan Ave, Brooklyn</td> <td>540 Metropolitan Ave, Brooklyn</td>
</tr> </tr>
<tr id="39" class="spotRow"> <tr id="38" class="spotRow">
<td class="name">East Village Books</td> <td class="name">East Village Books</td>
<td>99 St. Mark's Place, New York</td> <td>99 St. Mark's Place, New York</td>
</tr> </tr>
<tr id="40" class="spotRow"> <tr id="39" class="spotRow">
<td class="name">ETG Book Cafe</td> <td class="name">ETG Book Cafe</td>
<td>208 Bay St, Staten Island</td> <td>208 Bay St, Staten Island</td>
</tr> </tr>
<tr id="41" class="spotRow"> <tr id="40" class="spotRow">
<td class="name">Freebird Books</td> <td class="name">Freebird Books</td>
<td>123 Columbia St, Brooklyn</td> <td>123 Columbia St, Brooklyn</td>
</tr> </tr>
<tr id="42" class="spotRow"> <tr id="41" class="spotRow">
<td class="name">Greenlight Bookstore</td> <td class="name">Greenlight Bookstore</td>
<td>686 Fulton St, Brooklyn</td> <td>686 Fulton St, Brooklyn</td>
</tr> </tr>
<tr id="43" class="spotRow"> <tr id="42" class="spotRow">
<td class="name">Here's A Book Store</td> <td class="name">Here's A Book Store</td>
<td>1964 Coney Island Ave, Brooklyn</td> <td>1964 Coney Island Ave, Brooklyn</td>
</tr> </tr>
<tr id="44" class="spotRow"> <tr id="43" class="spotRow">
<td class="name">Hey Kids! Comics</td> <td class="name">Hey Kids! Comics</td>
<td>157 Huron St, Brooklyn</td> <td>157 Huron St, Brooklyn</td>
</tr> </tr>
<tr id="45" class="spotRow"> <tr id="44" class="spotRow">
<td class="name">Housing Works Bookstore Café</td> <td class="name">Housing Works Bookstore Café</td>
<td>126 Crosby St, New York</td> <td>126 Crosby St, New York</td>
</tr> </tr>
<tr id="46" class="spotRow"> <tr id="45" class="spotRow">
<td class="name">Human Relations Books</td> <td class="name">Human Relations Books</td>
<td>1067 Flushing Ave, Brooklyn</td> <td>1067 Flushing Ave, Brooklyn</td>
</tr> </tr>
<tr id="47" class="spotRow"> <tr id="46" class="spotRow">
<td class="name">Idlewild Books</td>
<td>170 7th Avenue S, New York</td>
</tr>
<tr id="48" class="spotRow">
<td class="name">James Cummins Bookseller</td> <td class="name">James Cummins Bookseller</td>
<td>699 Madison Ave, 7th Floor, New York</td> <td>699 Madison Ave, 7th Floor, New York</td>
</tr> </tr>
<tr id="49" class="spotRow"> <tr id="47" class="spotRow">
<td class="name">Joanne Hendricks Cookbooks</td> <td class="name">Joanne Hendricks Cookbooks</td>
<td>488 Greenwich St, New York</td> <td>488 Greenwich St, New York</td>
</tr> </tr>
<tr id="50" class="spotRow"> <tr id="48" class="spotRow">
<td class="name">Karma Bookstore</td> <td class="name">Karma Bookstore</td>
<td>136 East Third St, New York</td> <td>136 East Third St, New York</td>
</tr> </tr>
<tr id="51" class="spotRow"> <tr id="49" class="spotRow">
<td class="name">Kew &amp; Willow Books</td> <td class="name">Kew &amp; Willow Books</td>
<td>81-63 Lefferts Boulevard, New York</td> <td>81-63 Lefferts Boulevard, New York</td>
</tr> </tr>
<tr id="52" class="spotRow"> <tr id="50" class="spotRow">
<td class="name">Kinokunya</td> <td class="name">Kinokunya</td>
<td>1073 Avenue of the Americas, New York</td> <td>1073 Avenue of the Americas, New York</td>
</tr> </tr>
<tr id="53" class="spotRow"> <tr id="51" class="spotRow">
<td class="name">Kitchen Arts &amp; Letters</td> <td class="name">Kitchen Arts &amp; Letters</td>
<td>1435 Lexington Ave, New York</td> <td>1435 Lexington Ave, New York</td>
</tr> </tr>
<tr id="54" class="spotRow"> <tr id="52" class="spotRow">
<td class="name">Leaves Bookstore</td> <td class="name">Leaves Bookstore</td>
<td>140 Nassau Ave, Brooklyn</td> <td>140 Nassau Ave, Brooklyn</td>
</tr> </tr>
<tr id="55" class="spotRow"> <tr id="53" class="spotRow">
<td class="name">Left Bank Books</td> <td class="name">Left Bank Books</td>
<td>41 Perry St, New York</td> <td>41 Perry St, New York</td>
</tr> </tr>
<tr id="56" class="spotRow"> <tr id="54" class="spotRow">
<td class="name">Lofty Pigeon Books</td> <td class="name">Lofty Pigeon Books</td>
<td>743 Church Ave, Brooklyn</td> <td>743 Church Ave, Brooklyn</td>
</tr> </tr>
<tr id="57" class="spotRow"> <tr id="55" class="spotRow">
<td class="name">Logos Bookstore</td> <td class="name">Logos Bookstore</td>
<td>1575 York Ave, New York</td> <td>1575 York Ave, New York</td>
</tr> </tr>
<tr id="58" class="spotRow"> <tr id="56" class="spotRow">
<td class="name">Mast Books</td> <td class="name">Mast Books</td>
<td>72 Avenue A, New York</td> <td>72 Avenue A, New York</td>
</tr> </tr>
<tr id="59" class="spotRow"> <tr id="57" class="spotRow">
<td class="name">McNally Jackson Books</td> <td class="name">McNally Jackson Books</td>
<td>134 Prince St, New York</td> <td>134 Prince St, New York</td>
</tr> </tr>
<tr id="60" class="spotRow"> <tr id="58" class="spotRow">
<td class="name">McNally Jackson Books City Point</td> <td class="name">McNally Jackson Books City Point</td>
<td>445 Albee Square W, Unit G112, Brooklyn</td> <td>445 Albee Square W, Unit G112, Brooklyn</td>
</tr> </tr>
<tr id="61" class="spotRow"> <tr id="59" class="spotRow">
<td class="name">McNally Jackson Books Seaport</td> <td class="name">McNally Jackson Books Seaport</td>
<td>4 Fulton St, New York</td> <td>4 Fulton St, New York</td>
</tr> </tr>
<tr id="62" class="spotRow"> <tr id="60" class="spotRow">
<td class="name">McNally Jackson Books Williamsburg</td> <td class="name">McNally Jackson Books Williamsburg</td>
<td>76 North 4th St, Brooklyn</td> <td>76 North 4th St, Brooklyn</td>
</tr> </tr>
<tr id="63" class="spotRow"> <tr id="61" class="spotRow">
<td class="name">McNally Jackson Rockefeller Center</td> <td class="name">McNally Jackson Rockefeller Center</td>
<td>1 Rockefeller Plaza, New York</td> <td>1 Rockefeller Plaza, New York</td>
</tr> </tr>
<tr id="64" class="spotRow"> <tr id="62" class="spotRow">
<td class="name">Melville House Publishers</td> <td class="name">Melville House Publishers</td>
<td>46 John St, Brooklyn</td> <td>46 John St, Brooklyn</td>
</tr> </tr>
<tr id="65" class="spotRow"> <tr id="63" class="spotRow">
<td class="name">Mercer Street Books &amp; Records</td> <td class="name">Mercer Street Books &amp; Records</td>
<td>206 Mercer St, New York</td> <td>206 Mercer St, New York</td>
</tr> </tr>
<tr id="66" class="spotRow"> <tr id="64" class="spotRow">
<td class="name">Mil Mundos Books</td> <td class="name">Mil Mundos Books</td>
<td>323 Linden St, Brooklyn</td> <td>323 Linden St, Brooklyn</td>
</tr> </tr>
<tr id="67" class="spotRow"> <tr id="65" class="spotRow">
<td class="name">Molasses Books</td> <td class="name">Molasses Books</td>
<td>770 Hart St, Brooklyn</td> <td>770 Hart St, Brooklyn</td>
</tr> </tr>
<tr id="68" class="spotRow"> <tr id="66" class="spotRow">
<td class="name">Namaste Bookshop</td> <td class="name">Namaste Bookshop</td>
<td>2 W 14th St, New York</td> <td>2 W 14th St, New York</td>
</tr> </tr>
<tr id="69" class="spotRow"> <tr id="67" class="spotRow">
<td class="name">P&amp;T Knitwear</td> <td class="name">P&amp;T Knitwear</td>
<td>180 Orchard St, New York</td> <td>180 Orchard St, New York</td>
</tr> </tr>
<tr id="70" class="spotRow"> <tr id="68" class="spotRow">
<td class="name">Passageway Books</td> <td class="name">Passageway Books</td>
<td>150 9th Ave, New York</td> <td>150 9th Ave, New York</td>
</tr> </tr>
<tr id="71" class="spotRow"> <tr id="69" class="spotRow">
<td class="name">Pillow-Cat Books</td> <td class="name">Pillow-Cat Books</td>
<td>328 East 9th St, New York</td> <td>328 East 9th St, New York</td>
</tr> </tr>
<tr id="72" class="spotRow"> <tr id="70" class="spotRow">
<td class="name">Posman Books Chelsea Market</td> <td class="name">Posman Books Chelsea Market</td>
<td>75 9th Avenue, New York</td> <td>75 9th Avenue, New York</td>
</tr> </tr>
<tr id="73" class="spotRow"> <tr id="71" class="spotRow">
<td class="name">POWERHOUSE @ IC</td> <td class="name">POWERHOUSE @ IC</td>
<td>220 36th St, Building #2, Brooklyn</td> <td>220 36th St, Building #2, Brooklyn</td>
</tr> </tr>
<tr id="74" class="spotRow"> <tr id="72" class="spotRow">
<td class="name">POWERHOUSE Arena</td> <td class="name">POWERHOUSE Arena</td>
<td>28 Adams St, Brooklyn</td> <td>28 Adams St, Brooklyn</td>
</tr> </tr>
<tr id="75" class="spotRow"> <tr id="73" class="spotRow">
<td class="name">POWERHOUSE on 8th</td> <td class="name">POWERHOUSE on 8th</td>
<td>1111 8th Ave, Brooklyn</td> <td>1111 8th Ave, Brooklyn</td>
</tr> </tr>
<tr id="76" class="spotRow"> <tr id="74" class="spotRow">
<td class="name">Printed Matter</td> <td class="name">Printed Matter</td>
<td>231 11th Ave, New York</td> <td>231 11th Ave, New York</td>
</tr> </tr>
<tr id="77" class="spotRow"> <tr id="75" class="spotRow">
<td class="name">Printed Matter St. Marks</td> <td class="name">Printed Matter St. Marks</td>
<td>38 St. Marks Pl, New York</td> <td>38 St. Marks Pl, New York</td>
</tr> </tr>
<tr id="78" class="spotRow"> <tr id="76" class="spotRow">
<td class="name">Quest Bookshop</td> <td class="name">Quest Bookshop</td>
<td>240 E 53rd St, New York</td> <td>240 E 53rd St, New York</td>
</tr> </tr>
<tr id="79" class="spotRow"> <tr id="77" class="spotRow">
<td class="name">Quimby's Bookstore</td> <td class="name">Quimby's Bookstore</td>
<td>536 Metropolitan Ave, Brooklyn</td> <td>536 Metropolitan Ave, Brooklyn</td>
</tr> </tr>
<tr id="80" class="spotRow"> <tr id="78" class="spotRow">
<td class="name">Recirculation</td> <td class="name">Recirculation</td>
<td>876 Riverside Dr, New York</td> <td>876 Riverside Dr, New York</td>
</tr> </tr>
<tr id="81" class="spotRow"> <tr id="79" class="spotRow">
<td class="name">Respect For Life Books-N-Things</td> <td class="name">Respect For Life Books-N-Things</td>
<td>537 Nostrand Ave, Brooklyn</td> <td>537 Nostrand Ave, Brooklyn</td>
</tr> </tr>
<tr id="82" class="spotRow"> <tr id="80" class="spotRow">
<td class="name">Revolution Books</td> <td class="name">Revolution Books</td>
<td>437 Malcolm X Blvd, New York</td> <td>437 Malcolm X Blvd, New York</td>
</tr> </tr>
<tr id="83" class="spotRow"> <tr id="81" class="spotRow">
<td class="name">Rizzoli Bookstore</td> <td class="name">Rizzoli Bookstore</td>
<td>1133 Broadway, New York</td> <td>1133 Broadway, New York</td>
</tr> </tr>
<tr id="84" class="spotRow"> <tr id="82" class="spotRow">
<td class="name">Shakespeare &amp; Company</td> <td class="name">Shakespeare &amp; Company</td>
<td>939 Lexington Ave, New York</td> <td>939 Lexington Ave, New York</td>
</tr> </tr>
<tr id="85" class="spotRow"> <tr id="83" class="spotRow">
<td class="name"> <td class="name">
Shakespeare &amp; Company (Upper West Side) Shakespeare &amp; Company (Upper West Side)
</td> </td>
<td>2020 Broadway, New York</td> <td>2020 Broadway, New York</td>
</tr> </tr>
<tr id="86" class="spotRow"> <tr id="84" class="spotRow">
<td class="name">Sister's Uptown Bookstore</td> <td class="name">Sister's Uptown Bookstore</td>
<td>1942 Amsterdam Ave, New York</td> <td>1942 Amsterdam Ave, New York</td>
</tr> </tr>
<tr id="87" class="spotRow"> <tr id="85" class="spotRow">
<td class="name">Spoonbill &amp; Sugartown, Booksellers</td> <td class="name">Spoonbill &amp; Sugartown, Booksellers</td>
<td>218 Bedford Ave, Brooklyn</td> <td>218 Bedford Ave, Brooklyn</td>
</tr> </tr>
<tr id="88" class="spotRow"> <tr id="86" class="spotRow">
<td class="name">Standards Manual</td> <td class="name">Standards Manual</td>
<td>212 Franklin Street, Brooklyn</td> <td>212 Franklin Street, Brooklyn</td>
</tr> </tr>
<tr id="89" class="spotRow"> <tr id="87" class="spotRow">
<td class="name">Strand Bookstore</td> <td class="name">Strand Bookstore</td>
<td>828 Broadway, New York</td> <td>828 Broadway, New York</td>
</tr> </tr>
<tr id="90" class="spotRow"> <tr id="88" class="spotRow">
<td class="name">Sweet Pickle Books</td> <td class="name">Sweet Pickle Books</td>
<td>47 Orchard St, New York</td> <td>47 Orchard St, New York</td>
</tr> </tr>
<tr id="91" class="spotRow"> <tr id="89" class="spotRow">
<td class="name">Taylor &amp; Co. Books</td> <td class="name">Taylor &amp; Co. Books</td>
<td>1021 Cortelyou Rd, Brooklyn</td> <td>1021 Cortelyou Rd, Brooklyn</td>
</tr> </tr>
<tr id="92" class="spotRow"> <tr id="90" class="spotRow">
<td class="name">Terrace Books</td> <td class="name">Terrace Books</td>
<td>242 Prospect Park West, Brooklyn</td> <td>242 Prospect Park West, Brooklyn</td>
</tr> </tr>
<tr id="93" class="spotRow"> <tr id="91" class="spotRow">
<td class="name">The Austin Book Shop</td> <td class="name">The Austin Book Shop</td>
<td>104-29 Jamaica Ave, Richmond Hill</td> <td>104-29 Jamaica Ave, Richmond Hill</td>
</tr> </tr>
<tr id="94" class="spotRow"> <tr id="92" class="spotRow">
<td class="name">The Book Cellar</td> <td class="name">The Book Cellar</td>
<td>1465 York Ave, New York</td> <td>1465 York Ave, New York</td>
</tr> </tr>
<tr id="95" class="spotRow"> <tr id="93" class="spotRow">
<td class="name">The Center for Fiction</td> <td class="name">The Center for Fiction</td>
<td>15 Lafayette Ave, Brooklyn</td> <td>15 Lafayette Ave, Brooklyn</td>
</tr> </tr>
<tr id="96" class="spotRow"> <tr id="94" class="spotRow">
<td class="name">The Corner Bookstore</td> <td class="name">The Corner Bookstore</td>
<td>1313 Madison Ave, New York</td> <td>1313 Madison Ave, New York</td>
</tr> </tr>
<tr id="97" class="spotRow"> <tr id="95" class="spotRow">
<td class="name">The Drama Book Shop</td> <td class="name">The Drama Book Shop</td>
<td>266 W 39th St, New York</td> <td>266 W 39th St, New York</td>
</tr> </tr>
<tr id="98" class="spotRow"> <tr id="96" class="spotRow">
<td class="name">The Lit. Bar</td> <td class="name">The Lit. Bar</td>
<td>131 Alexander Ave, Bronx</td> <td>131 Alexander Ave, Bronx</td>
</tr> </tr>
<tr id="99" class="spotRow"> <tr id="97" class="spotRow">
<td class="name">The Mysterious Bookshop</td> <td class="name">The Mysterious Bookshop</td>
<td>58 Warren St, New York</td> <td>58 Warren St, New York</td>
</tr> </tr>
<tr id="100" class="spotRow"> <tr id="98" class="spotRow">
<td class="name">The Ripped Bodice</td> <td class="name">The Ripped Bodice</td>
<td>218 5th Ave, Brooklyn</td> <td>218 5th Ave, Brooklyn</td>
</tr> </tr>
<tr id="101" class="spotRow"> <tr id="99" class="spotRow">
<td class="name">The Strand At Columbus Ave</td> <td class="name">The Strand At Columbus Ave</td>
<td>450 Columbus Ave, New York</td> <td>450 Columbus Ave, New York</td>
</tr> </tr>
<tr id="102" class="spotRow"> <tr id="100" class="spotRow">
<td class="name">The Word Is Change</td> <td class="name">The Word Is Change</td>
<td>368 Tompkins Ave, Brooklyn</td> <td>368 Tompkins Ave, Brooklyn</td>
</tr> </tr>
<tr id="103" class="spotRow"> <tr id="101" class="spotRow">
<td class="name">Three Lives &amp; Company</td> <td class="name">Three Lives &amp; Company</td>
<td>238 West 10th St, New York</td> <td>154 W 10th St, New York</td>
</tr> </tr>
<tr id="104" class="spotRow"> <tr id="102" class="spotRow">
<td class="name">Topos Bookstore Cafe</td> <td class="name">Topos Bookstore Cafe</td>
<td>788 Woodward Ave, Brooklyn</td> <td>788 Woodward Ave, Brooklyn</td>
</tr> </tr>
<tr id="105" class="spotRow"> <tr id="103" class="spotRow">
<td class="name">Topos Too</td>
<td>59-22 Myrtle Ave, Queens</td>
</tr>
<tr id="104" class="spotRow">
<td class="name">Troubled Sleep Books</td> <td class="name">Troubled Sleep Books</td>
<td>129 6th Ave, Brooklyn</td> <td>129 6th Ave, Brooklyn</td>
</tr> </tr>
<tr id="106" class="spotRow"> <tr id="105" class="spotRow">
<td class="name">Turn The Page... Again</td> <td class="name">Turn The Page... Again</td>
<td>39-15a Bell Blvd, Flushing</td> <td>39-15a Bell Blvd, Flushing</td>
</tr> </tr>
<tr id="107" class="spotRow"> <tr id="106" class="spotRow">
<td class="name">Unnameable Books</td> <td class="name">Unnameable Books</td>
<td>600 Vanderbilt Ave, Brooklyn</td> <td>600 Vanderbilt Ave, Brooklyn</td>
</tr> </tr>
<tr id="108" class="spotRow"> <tr id="107" class="spotRow">
<td class="name">Ursus Books</td> <td class="name">Ursus Books</td>
<td>50 East 78th St, Suite 1C, New York</td> <td>50 East 78th St, Suite 1C, New York</td>
</tr> </tr>
<tr id="108" class="spotRow">
<td class="name">Village Works</td>
<td>12 St. Marks Pl, New York</td>
</tr>
<tr id="109" class="spotRow"> <tr id="109" class="spotRow">
<td class="name">Westsider Rare &amp; Used Books</td> <td class="name">Westsider Rare &amp; Used Books</td>
<td>2246 Broadway, New York</td> <td>2246 Broadway, New York</td>
@ -685,7 +683,6 @@
${city}, NY ${postcode} ${city}, NY ${postcode}
</p> </p>
<p> <p>
View in:
<a <a
href="https://maps.google.com/maps?q=${encodeURIComponent( href="https://maps.google.com/maps?q=${encodeURIComponent(
name name
@ -706,17 +703,13 @@
: "" : ""
} }
</p> </p>
<ul>
${ ${
website website
? `<li><a href="${website}" target="_blank">${cleanWebsite( ? `<p><a href="${website}" target="_blank">${cleanWebsite(
website website
)}</a></li>` )}</a></p>`
: "" : ""
} }
<li class="storeDetails">Events: ${events}</li>
<li class="storeDetails">Caf&eacute;: ${cafe}</li>
</ul>
${description ? `<p class="description">${description}</p>` : ""}`; ${description ? `<p class="description">${description}</p>` : ""}`;
} }
@ -820,6 +813,10 @@
} }
} }
function isStacked() {
return screen.width < 1120;
}
function boundingBox(point) { function boundingBox(point) {
// add some buffer to a point to give the user some leeway // add some buffer to a point to give the user some leeway
return [ return [
@ -829,7 +826,11 @@
} }
function updateSelectedStore(store, pushState = false) { function updateSelectedStore(store, pushState = false) {
map.flyTo({ center: [store.long, store.lat], zoom: 12 }); map.flyTo({
center: [store.long, store.lat],
offset: [isStacked() ? 0 : -250, 0],
zoom: 13,
});
popup.setLngLat([store.long, store.lat]).setHTML(store.name).addTo(map); popup.setLngLat([store.long, store.lat]).setHTML(store.name).addTo(map);
@ -851,8 +852,6 @@
} }
function loadMap(data) { function loadMap(data) {
var geolocate = new mapboxgl.GeolocateControl();
var points = []; var points = [];
data.forEach((value, key) => { data.forEach((value, key) => {
points.push({ points.push({
@ -883,7 +882,6 @@
}, },
}); });
map.addControl(new mapboxgl.NavigationControl(), "top-left"); map.addControl(new mapboxgl.NavigationControl(), "top-left");
map.addControl(geolocate, "top-right");
updateViewBySlug(window.location.hash.split("#")[1]); updateViewBySlug(window.location.hash.split("#")[1]);
}); });
@ -916,20 +914,12 @@
map.getCanvas().style.cursor = features.length ? "pointer" : ""; map.getCanvas().style.cursor = features.length ? "pointer" : "";
}); });
geolocate.on("geolocate", function (e) {
map.setZoom(14);
popup
.setLngLat([e.coords.longitude, e.coords.latitude])
.setHTML("Current Location")
.addTo(map);
});
setContent("Stores", TableViewTemplate(data)); setContent("Stores", TableViewTemplate(data));
document.querySelectorAll("#Stores tbody tr").forEach((element) => { document.querySelectorAll("#Stores tbody tr").forEach((element) => {
element.addEventListener("click", () => { element.addEventListener("click", () => {
updateSelectedStore(data[element.id], true); updateSelectedStore(data[element.id], true);
document document
.getElementById("subhed") .getElementById(isStacked() ? "map" : "selected")
.scrollIntoView({ behavior: "smooth" }); .scrollIntoView({ behavior: "smooth" });
}); });
}); });