-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
386 lines (379 loc) · 18.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
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Plan Submissions Review Map</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="The Plan Submission Review Map is a useful tool for municipal and county officials, as well as residents and other stakeholders to monitor subdivision and land development activity throughout Cumberland County, Pennsylvania.">
<meta name="author" content="Cumberland County GIS">
<link type="image/ico" rel="shortcut icon" href="img/favicon.ico">
<!-- Facebook sharing -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Plan Submissions Review Map" />
<meta property="og:image" content="assets/img/plan-reviewed-by-staff.jpg" />
<meta property="og:description" content="An interactive web map that is a useful tool for municipal and county officials as well as residents and other stakeholders to monitor subdivision and land development activity throughout Cumberland County." />
<!-- 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">
<!-- jQuery UI -->
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<!-- 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">Plan Submissions Review Map</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="about-btn" class="btn dropdown-item">About the Map</button></li>
<li><button id="search-btn" class="btn dropdown-item d-sm-block d-md-block d-lg-none">Search</button></li>
<li><button id="std-filter-btn" class="btn dropdown-item">Filter Plans By Date</button></li>
<li><button id="year-filter-btn" class="btn dropdown-item">Filter Plans By Year</button></li>
<li><button id="multi-year-filter-btn" class="btn dropdown-item">Filter Plans By Multiple Years</button></li>
<li><button id="muni-zoom-btn" class="btn dropdown-item">Zoom To Municipality</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">
<!-- displays date filter applied to data-->
<div class="filter-ui">
<p>Date Filter:
<span id="startDateUI"></span>
through
<span id="endDateUI"></span>
</p>
</div>
<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><!-- 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>The Plan Submission Review Map web-map was created in March 2019 by the <a href="https://www.ccpa.net/116/Geographic-Information-Systems-GIS" target="_blank" rel="noopener">Cumberland County GIS Department</a> under direction from the <a href="https://www.ccpa.net/120/Planning-Department" target="_blank" rel="noopener">Cumberland County Planning Department</a>.</p>
<p>The map is a useful tool for municipal and county officials as well as residents and other stakeholders to monitor subdivision and land development activity throughout the County.</p>
<p>The web-map will include information about each plan officially submitted to the Cumberland County Planning Department for review and comments after January 1, 2019.</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>
<!-- 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>
<!-- filter widget -->
<div id="filterModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Filter Plans By Date</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Use this tool to view plans submitted within a specified time range. Select/Press "Apply Filter" to view the plans within the time range.
</p>
<br />
<div class="form-group">
<label for="fromDate">Start Date:</label>
<input class="form-control" type="text" id="fromDate" name="from">
</div>
<div class="form-group">
<label for="toDate">End Date:</label>
<input class="form-control" type="text" id="toDate" name="to">
</div>
<div class="form-group">
<button type="button" id="setFilter" class="btn btn-secondary">Apply Filter</button>
</div>
<div class="form-group">
<button type="button" id="clearFilter" class="btn btn-secondary">Clear Filter</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Select By Year Pane -->
<div id="filterYearModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Filter Plans By Year</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Use this tool to view plans submitted within a specific year.</p>
<p>Select a year from the list below:</p>
<br />
<div class="form-group">
<select class="form-control" id="plansSelectedYear">
<option value="" disabled selected>Select Year</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Select By Start and End Year Panel -->
<div id="filterMultiYearModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Filter Plans By Multiple Year</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Use this tool to view plans submitted within a range of years.</p>
<p>Select a starting and ending year.</p>
<br />
<!-- Start Year -->
<div class="form-group">
<label for="plansStartYear">Start Year</label>
<select class="form-control" id="plansStartYear">
<option value="" disabled selected>Select Year</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
<!-- End Year -->
<div class="form-group">
<label for="plansEndYear">End Year</label>
<select class="form-control" id="plansEndYear">
<option value="" disabled selected>Select Year</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
<div class="form-group">
<button type="button" id="setFilterMultipleYears" class="btn btn-secondary">Apply Filter</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Zoom To Muni Panel -->
<div id="muniZoomModal" 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 LegendZoom To Municipality</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Select a municipality below to zoom to it:</p>
<select id="selectMuni" class="form-control">
<option value="Default">Select A Municipality</option>
<option value="Camp Hill">Camp Hill Borough</option>
<option value="Carlisle">Carlisle Borough</option>
<option value="Cooke">Cooke Township</option>
<option value="Dickinson">Dickinson Township</option>
<option value="East Pennsboro">East Pennsboro Township</option>
<option value="Hampden">Hampden Township</option>
<option value="Hopewell">Hopewell Township</option>
<option value="Lemoyne">Lemoyne Borough</option>
<option value="Lower Allen">Lower Allen Township</option>
<option value="Lower Frankford">Lower Frankford Township</option>
<option value="Lower Mifflin">Lower Mifflin Township</option>
<option value="Mechanicsburg">Mechanicsburg Borough</option>
<option value="Middlesex">Middlesex Township</option>
<option value="Monroe">Monroe Township</option>
<option value="Mt. Holly Springs">Mt. Holly Springs Borough</option>
<option value="New Cumberland">New Cumberland Borough</option>
<option value="Newburg">Newburg Borough</option>
<option value="Newville">Newville Borough</option>
<option value="North Middleton">North Middleton Township</option>
<option value="North Newton">North Newton Township</option>
<option value="Penn">Penn Township</option>
<option value="Shippensburg Boro">Shippensburg Borough</option>
<option value="Shippensburg Twp">Shippensburg Township</option>
<option value="Shiremanstown">Shiremanstown Borough</option>
<option value="Silver Spring">Silver Spring Township</option>
<option value="South Middleton">South Middleton Township</option>
<option value="South Newton">South Newton Township</option>
<option value="Southampton">Southampton Township</option>
<option value="Upper Allen">Upper Allen Township</option>
<option value="Upper Frankford">Upper Frankford Township</option>
<option value="Upper Mifflin">Upper Mifflin Township</option>
<option value="West Pennsboro">West Pennsboro Township</option>
<option value="Wormleysburg">Wormleysburg Borough</option>
</select>
</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>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>
<!-- Scripts -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 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>
<!-- jquery related code -->
<script src="js/functions.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 of reviewed subdivision and land development plans 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>