-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
152 lines (135 loc) · 10.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!doctype html>
<html lang="en">
<head>
<title>NYC Property Tax Map | Sidewalk Chorus</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<!-- Favicon details generated by https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
<link rel="manifest" href="/img/favicon/site.webmanifest">
<link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#fc4630">
<link rel="shortcut icon" href="/img/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="NYC Property Tax Map">
<meta name="application-name" content="NYC Property Tax Map">
<meta name="msapplication-TileColor" content="#fc4630">
<meta name="msapplication-config" content="/img/favicon/browserconfig.xml">
<meta name="theme-color" content="#f5f5f5">
<meta property="og:title" content="NYC Property Tax Map" />
<meta property="og:description" content="New York City's property tax system is unfair. This map visualizes exactly how much tax each property pays." />
<meta property="og:image" content="./img/map.png" />
<meta property="og:url" content="https://taxmap.sidewalkchorus.com/" />
<meta name="description" content="New York City's property tax system is unfair. This map visualizes exactly how much tax each property pays.">
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Sidewalk Chorus" />
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JXXLENWT5D"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag() { dataLayer.push(arguments) }
gtag('js', new Date())
gtag('config', 'G-JXXLENWT5D');
</script>
<body>
<div id="flex-height">
<header class="container-fluid border-bottom">
<div class="row align-items-center p-1 py-md-3 px-md-2">
<!-- Logo on the far left -->
<div class="col-2 col-md-3">
<a href="https://www.sidewalkchorus.com"><img id="logo" src="./img/Liberty.jpeg" alt="Liberty" class="img-fluid"></a>
</div>
<!-- Centered page title -->
<div class="col-10 col-md-6 text-md-center">
<h1 class="mb-0 header-title">NYC Property Tax Map</h1>
</div>
<!-- Empty div for spacing on the right -->
<div class="col-0 col-md-3"></div>
</div>
</header>
<div class="container">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-property-details-tab" data-bs-toggle="tab" data-bs-target="#nav-property-details" type="button" role="tab" aria-controls="nav-property-details" aria-selected="false">Property Details</button>
<button class="nav-link" id="nav-about-tab" data-bs-toggle="tab" data-bs-target="#nav-about" type="button" role="tab" aria-controls="nav-about" aria-selected="false">About</button>
</div>
</nav>
<div class="tab-content pt-2 d-md-block" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<div class="row small">
<div class="col-md-6">
<p>
<b>This map visualizes New York City's property taxes.</b> Each dot is a property, color-coded based on its effective tax rate. <span class="d-inline d-md-none">Search for an addresss in the box below or tap on a property on the map to view its tax bill.</span>
</p>
<p class="d-none d-md-block">
Search for an addresss in the box below or tap on a property on the map to view its tax bill.
</p>
</div>
<div class="col-md-6">
<p>
<b>New York's property tax system is unfair.</b> Similar properties are often taxed at wildly different rates. Millionaires' mansions are frequently taxed at lower rates than working-class apartments. <span class="d-inline d-md-none">Read more on <i>Sidewalk Chorus</i> about <a href="https://www.sidewalkchorus.com/p/property-tax" target="_blank">New York's flawed property tax system</a> and <a href="https://www.sidewalkchorus.com/p/property-tax-reform" target="_blank">how we can reform it</a>.</span>
</p>
<p class="d-none d-md-block">
Read more on <i>Sidewalk Chorus</i> about <a href="https://www.sidewalkchorus.com/p/property-tax" target="_blank">New York's flawed property tax system</a> and <a href="https://www.sidewalkchorus.com/p/property-tax-reform" target="_blank">how we can reform it</a>.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-property-details" role="tabpanel" aria-labelledby="nav-property-details-tab" tabindex="0">
<div class="row" id="property-details-drawer">
<p>Search for an addresss in the box below or tap on a property on the map to view its tax bill.</p>
</div>
</div>
<div class="tab-pane fade" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab" tabindex="0">
<div class="row small">
<div class="col-md-6">
<p>
This map was created by <a rel="author" href="https://www.sebthedev.com" target="_blank">Sebastian Hallum Clarke</a>, the author of <a href="https://www.sidewalkchorus.com" target="_blank">Sidewalk Chorus</a>. Countless experts and politicians have derided New York's unfair property tax system, but getting New York's legislators to act to fix the system first requires public awareness of the problems. This map is an attempt to help New Yorkers learn how their property tax system is failing them.
</p>
</div>
<div class="col-md-6">
<p>
The code that powers this map is available on <a href="https://github.com/sebthedev/NYC-Property-Tax-Map" target="_blank">GitHub</a>.
All of the data that powers this map is from official City of New York sources. Read mode about <a href="https://github.com/sebthedev/NYC-Property-Tax-Map#about-the-data" target="_blank">the data</a>, which was most recently updated on 10 November 2023.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="autocomplete-container">
<div class="container">
<div class="autocomplete" style="width:100%;">
<input id="addressSearchBox" type="search" name="addressSearchBox" placeholder="🔍 Search for a New York City address" autocomplete="off" spellcheck="false">
</div>
</div>
</div>
<div id="map" class="border"></div>
<div id="legend">
<div class="text-center">Effective Tax Rate</div>
<div class="container">
<div class="row">
<div class="col-auto legend-scale-text">0%</div>
<div class="col" id="color-scale"></div>
<div class="col-auto legend-scale-text">6%</div>
</div>
</div>
</div>
</div>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "AIzaSyAC_m803L3gTmiq3F_5FLu_Vpo5cF7U4WM",
v: "beta",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>