Skip to content

Commit

Permalink
Merge pull request #7 from raphaellaude/misc-app-improvements
Browse files Browse the repository at this point in the history 
Misc app improvements
  • Loading branch information
@raphaellaude
raphaellaude authored Feb 25, 2024
2 parents cd588eb + a6fb530 commit 890f9ef
Show file tree
Hide file tree
Showing 3 changed files with 412 additions and 272 deletions.
295 changes: 170 additions & 125 deletions pluto-hist/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,175 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<script src="/htmx.min.js"></script>
<link
href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<script>
window.va =
window.va ||
function () {
(window.vaq = window.vaq || []).push(arguments);
};
</script>
<script defer src="/_vercel/insights/script.js"></script>
<title>Test App</title>
</head>
<body>
<div class="sidebar mapquest">
<div style="display: flex; align-items: center">
<img
src="atm-logo.jpeg"
style="width: 24px; height: 24px; margin-right: 8px"
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<script src="/htmx.min.js"></script>
<link
href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
rel="stylesheet"
/>
<h1 class="title">NYC Parcel ATM</h1>
</div>
<h2 class="subtitle">Exploring PLUTO's 21 year history</h2>
<div style="display: flex; align-items: center; gap: 8px">
<button id="prev-year">&larr;</button>
<h3 class="title mapquest no-print" id="year">2002</h3>
<button id="next-year">&rarr;</button>
</div>
<p id="zoom" class="no-print"></p>
<div id="legend">
<!-- <h3>Land use</h3> -->
<div class="legend-item">
<div class="legend-color" style="background-color: #feffa8"></div>
<p class="legend-text">01: 1 & 2 Family Buildings</p>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #fcb841"></div>
<p class="legend-text">02: Multi-Family Walk-Up Buildings</p>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #c98e0e"></div>
<p class="legend-text">03: Multi-Family Elevator Buildings</p>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ff8341"></div>
<p class="legend-text">
04: Mixed Residential & Commercial Buildings
</p>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #cc3e3d"></div>
<p class="legend-text">05: Commercial & Office Buildings</p>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #c26dd1"></div>
<p class="legend-text">06: Industrial & Manufacturing</p>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #dfbeeb"></div>
<p class="legend-text">07: Transportation & Utility</p>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #519dc4"></div>
<p class="legend-text">08: Public Facilities & Institutions</p>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #699466"></div>
<p class="legend-text">09: Open Space & Outdoor Recreation</p>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #bab8b6"></div>
<p class="legend-text">10: Parking Facilities</p>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #555555"></div>
<p class="legend-text">11: Vacant Land</p>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<script>
window.va =
window.va ||
function () {
(window.vaq = window.vaq || []).push(arguments);
};
</script>
<script defer src="/_vercel/insights/script.js"></script>
<title>Parcel ATM</title>
</head>
<body>
<div class="sidebar mapquest">
<div style="display: flex; align-items: center">
<img
src="atm-logo.jpeg"
style="width: 24px; height: 24px; margin-right: 8px"
/>
<h1 class="title">NYC Parcel ATM</h1>
</div>
<h2 class="subtitle">Exploring PLUTO's 21 year history</h2>
<div style="display: flex; align-items: center; gap: 8px">
<button id="prev-year">&larr;</button>
<h3 class="title mapquest no-print" id="year">2002</h3>
<button id="next-year">&rarr;</button>
</div>
<p id="zoom" class="no-print"></p>
<div id="legend">
<!-- <h3>Land use</h3> -->
<div class="legend-item">
<div
class="legend-color"
style="background-color: #feffa8"
></div>
<p class="legend-text">01: 1 & 2 Family Buildings</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #fcb841"
></div>
<p class="legend-text">
02: Multi-Family Walk-Up Buildings
</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #c98e0e"
></div>
<p class="legend-text">
03: Multi-Family Elevator Buildings
</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #ff8341"
></div>
<p class="legend-text">
04: Mixed Residential & Commercial Buildings
</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #cc3e3d"
></div>
<p class="legend-text">05: Commercial & Office Buildings</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #c26dd1"
></div>
<p class="legend-text">06: Industrial & Manufacturing</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #dfbeeb"
></div>
<p class="legend-text">07: Transportation & Utility</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #519dc4"
></div>
<p class="legend-text">
08: Public Facilities & Institutions
</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #699466"
></div>
<p class="legend-text">
09: Open Space & Outdoor Recreation
</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #bab8b6"
></div>
<p class="legend-text">10: Parking Facilities</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #555555"
></div>
<p class="legend-text">11: Vacant Land</p>
</div>
<div class="legend-item">
<div
class="legend-color"
style="background-color: #e7e7e7"
></div>
<p class="legend-text">Other</p>
</div>
</div>
<div id="data"></div>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #e7e7e7"></div>
<p class="legend-text">Other</p>
<div id="controls" class="mapquest no-print">
<div class="legend-item">
<div class="control-key legend-text">(a)</div>
<p class="legend-text">Go back 5 years</p>
</div>
<div class="legend-item">
<div class="control-key legend-text">(s)</div>
<p class="legend-text">Go forward 5 years</p>
</div>
<div class="legend-item">
<div class="control-key legend-text">(q)</div>
<p class="legend-text">Query</p>
</div>
<div class="legend-item">
<div class="control-key legend-text">(i)</div>
<p class="legend-text">Zoom in</p>
</div>
<div class="legend-item">
<div class="control-key legend-text">(o)</div>
<p class="legend-text">Zoom out</p>
</div>
<div class="legend-item">
<div class="control-key legend-text">(p)</div>
<p class="legend-text">Print receipt</p>
</div>
</div>
</div>
<div id="data"></div>
</div>
<div id="controls" class="mapquest no-print">
<div class="legend-item">
<div class="control-key legend-text">(a)</div>
<p class="legend-text">Go back 5 years</p>
</div>
<div class="legend-item">
<div class="control-key legend-text">(s)</div>
<p class="legend-text">Go forward 5 years</p>
</div>
<div class="legend-item">
<div class="control-key legend-text">(q)</div>
<p class="legend-text">Query</p>
</div>
<div class="legend-item">
<div class="control-key legend-text">(i)</div>
<p class="legend-text">Zoom in</p>
</div>
<div class="legend-item">
<div class="control-key legend-text">(o)</div>
<p class="legend-text">Zoom out</p>
</div>
<div class="legend-item">
<div class="control-key legend-text">(p)</div>
<p class="legend-text">Print receipt</p>
</div>
</div>
<div id="map" class="no-print"></div>
<div id="centerMarker" class="marker no-print"></div>
<script type="module" src="main.js"></script>
</body>
<div id="map" class="no-print"></div>
<div id="centerMarker" class="marker no-print"></div>
<div id="spinner">&#10003;</div>
<script type="module" src="main.js"></script>
</body>
</html>
Loading

0 comments on commit 890f9ef

Please sign in to comment.