-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
270 lines (259 loc) · 14.5 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Find Zoning District For Property</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="Web map app to identify which zoning district(s) a parcel (real estate) is within in Cumberland County, Pennsylvania">
<meta name="author" content="Cumberland County GIS">
<link rel="icon" href="">
<link type="image/ico" rel="shortcut icon" href="img/favicon.ico">
<!-- Facebook sharing -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Find Zoning District For Property" />
<meta property="og:image" content="img/zoning-map-screenshot.PNG" />
<meta property="og:image:alt" content="a zoning map for a community" />
<meta property="og:description" content="Web map app to identify which zoning district(s) a parcel (real estate) is within in Cumberland County, Pennsylvania" />
<!-- Stylesheets -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<!-- Esri Leaflet Geocoder -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/esri-leaflet-geocoder.css"
integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g=="
crossorigin="">
<!-- Leaflet Locate Control -->
<link rel="stylesheet" href="libs/leaflet-locate/L.Control.Locate.min.css">
<!-- Leaflet Zoom Home -->
<link rel="stylesheet" href="libs/leaflet-zoomhome/leaflet.zoomhome.css">
<!-- Leaflet Fullscreen -->
<link rel="stylesheet" href="libs/leaflet-fullscreen/leaflet.fullscreen.css">
<!-- App Custom Styles -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="fixed-top navbar">
<!-- title, subtitle, org image -->
<div class="justify-content-start">
<a class="navbar-brand" href="https://www.ccpa.net/" target="_blank" rel="noopener">
<img height="35" width="35" class="img-fluid d-none d-sm-inline-block" src="img/CCPALogo_61x61px.gif" alt="cumberland county logo" />
</a>
<h1 class="navbar-brand white">Find Zoning District For Property</h1>
<span class="white d-none d-md-inline"> Cumberland County, PA</span>
</div>
<!-- Desktop Search (in modal for mobile) -->
<div class="d-sm-none d-md-none d-lg-block justify-content-center">
<form>
<div id="geocode"></div>
</form>
</div>
<!-- Navigation -->
<nav class="nav justify-content-end">
<!-- navigation menu -->
<button class="nav-link dropdown-toggle white font-weight-bold" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
<ul class="dropdown dropdown-menu">
<li><button id="search-btn" class="btn dropdown-item d-sm-block d-md-block d-lg-none">Search</button></li>
<li><button id="about-btn" class="btn dropdown-item">About the Map</button></li>
<li><button id="legend-btn" class="btn dropdown-item">Map Legend</button></li>
<li><button id="disclaimer-btn" class="btn dropdown-item">Disclaimer</button></li>
</ul>
</nav>
</header>
<div id="container">
<div id="map"></div> <!-- leaflet map goes in here -->
</div>
<!-- Loading Screen -->
<div id="back-cover">
<span>Map Loading ...</span>
<span class="map-loader-icon"></span>
</div>
<!-- search widget (for mobile) -->
<div id="searchModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Search Widget</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="geocodeMobile"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- about widget -->
<div id="aboutModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">About the Map</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="text-warning">This demonstration app is based upon an existing production app. The sources for stylesheets and JavaScript files have been changed from the production version.</p>
<p class="text-warning">I have no control over the functioning or availability of the Esri REST services utilized in this app.</p>
<p>This map allows you to find the zoning district(s) for your property.</p>
<p>Please enter your property address or parcel ID (PIN) in the search bar to perform the search.</p>
<p>You can also zoom in, and click on a parcel to get the zoning district(s) for that property.</p>
<p>Zoning districts are symbolized by general categories instead of the the specific district as found on the official zoning map.</p>
<p>The information depicted on this map is the most current data made available to the Cumberland County Planning Department. Please contact the municipality to confirm the zoning classification for your property.</p>
<p>Visit <a target="_blank" rel="noopener" href="https://www.ccpa.net/BusinessDirectoryii.aspx?lngBusinessCategoryID=35">this website</a> for municipal contact information.</p>
<p>Map developed by <a href="https://www.ccpa.net/116/Geographic-Information-Systems" target="_blank" rel="noopener"><strong>Cumberland County GIS</strong></a>.</p>
<p>Vist our <a href="http://ccpa.maps.arcgis.com/home/gallery.html" target="_blank" rel="noopener">Map Gallery!</a></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- legend widget -->
<div id="legendModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Map Legend</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="map-legend-content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- disclaimer widget -->
<div id="disclaimerModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Disclaimer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>The information depicted on this map is the most current data made available to the Cumberland County Planning Department. Please contact the municipality to confirm the zoning classification for your property.</p>
<p>Visit <a target="_blank" rel="noopener" href="https://www.ccpa.net/BusinessDirectoryii.aspx?lngBusinessCategoryID=35">this website</a> for municipal contact information.</p>
<p>Cumberland County provides these Geographic Information System (GIS) maps and data on its web site as a public information service. Every reasonable effort has been made to assure the accuracy of these maps and data. No guarantee is made as to the accuracy of the maps and data and they should not be relied upon for any purpose other than general information.</p>
<p>CUMBERLAND COUNTY ASSUMES NO LIABILITY ARISING FROM USE OF THESE MAPS OR DATA. THE MAPS AND DATA ARE PROVIDED WITHOUT WARRANTY OF ANY KIND.</p>
<p>PROPRIETARY INFORMATION: All information on this website is proprietary. Any resale of this information is prohibited.</p>
<p>Contents: © 2021 Cumberland County, Pennsylvania. </p>
<p>BY USING THIS DATA, I UNDERSTAND AND KNOWINGLY CONSENT TO THE ABOVE TERMS AND CONDITIONS.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Results PanpanelResultsel -->
<div id="panelResults">
<h5 class="text-center">Zoning District(s) for Property</h5>
<button class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<hr />
<div id="resultsWaiting">
<span class="font-weight-bold">Performing Zoning District Search ...</span>
<br />
<span class="waiting-loader-icon"></span>
</div>
<div>
<span id="municipalWrapper">Municipality: <strong><span id="municipalName"></span></strong></span>
<div id="zoningResults"></div>
</div>
<hr />
<div class="text-small">
<p>Disclaimer:</p>
<p>The information depicted on this map is the most current data made available to the Cumberland County Planning Department. Please contact the municipality to confirm the zoning classification for your property.</p>
<p>Visit <a target="_blank" rel="noopener" href="https://www.ccpa.net/BusinessDirectoryii.aspx?lngBusinessCategoryID=35">this website</a> for municipal contact information.</p>
</div>
<hr />
<button id="resultsCloseBtn" class="btn btn-primary float-right">Close</button>
</div>
<!-- error message -->
<div id="layerErrorModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Error Adding Layers</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="text-danger">Warning: One or more layers failed to load on the map!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Leaflet -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- Esri Leaflet -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
integrity="sha512-oUArlxr7VpoY7f/dd3ZdUL7FGOvS79nXVVQhxlg6ij4Fhdc4QID43LUFRs7abwHNJ0EYWijiN5LP2ZRR2PY4hQ=="
crossorigin=""></script>
<!-- Esri Leaflet Renderers -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet-renderers.js"
integrity="sha512-/McnqdlwYvfeOEWqoniEagFRQnLi/TNbkHe4EJypmZI02LBT7vBU/+PZ5W3FSsFFlRbnMCsJvnbp5MX8XOBrnQ=="
crossorigin=""></script>
<!-- Esri Leaflet Geocoder -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet-geocoder.js"
integrity="sha512-enHceDibjfw6LYtgWU03hke20nVTm+X5CRi9ity06lGQNtC9GkBNl/6LoER6XzSudGiXy++avi1EbIg9Ip4L1w=="
crossorigin=""></script>
<!-- Leaflet Locate -->
<script src="libs/leaflet-locate/L.Control.Locate.min.js"></script>
<!-- Leaflet Zoomhome -->
<script src="libs/leaflet-zoomhome/leaflet.zoomhome.min.js"></script>
<!-- Leaflet Fullscreen -->
<script src="libs/leaflet-fullscreen/Leaflet.fullscreen.min.js"></script>
<!-- Proj4JS -->
<script src="libs/proj4js/proj4.js"></script>
<!-- Proj4Leaflet -->
<script src="libs/proj4leaflet/proj4leaflet.js"></script>
<!-- Esri Leaflet Legend -->
<script src="libs/esri-leaflet-legend/esri-leaflet-legend.js"></script>
<!-- UI -->
<script src="js/ui.js"></script>
<!-- Map Application -->
<script type="module" src="js/app.js"></script>
<!-- No Script-->
<noscript>
<div>
<p>You are trying to view an interactive map that allows people to find the zoning district(s) for their property in Cumberland County, Pennsylvania.</p>
<p>This map requires JavaScript, but running JavaScript is not currently enabled by your web browser.</p>
<p>If you wish to view this map, please enable JavaScript in this browser or try a different browser.</p>
</div>
</noscript>
</body>
</html>