/
index.html
607 lines (547 loc) · 38.2 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
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Harris Webster's Montpelier</title>
<meta name='robots' content='noindex, nofollow'>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet'>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<link rel='icon' type='image/png' href='noun_Vermont_1012843.png'>
<style>
body {
color:#404040;
font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
margin:0;
padding:0;
-webkit-font-smoothing:antialiased;
}
a:link {
color: 00853e;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #8cc63f;
background-color: transparent;
text-decoration: underline;
}
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar {
position:absolute;
width:28.0%;
height:100%;
top:0;left:0;
overflow:hidden;
border-right:1px solid rgba(0,0,0,0.25);
}
.pad2 {
padding:20px;
}
.map {
position:absolute;
left:28.0%;
width:72.0%;
top:0;bottom:0;
}
h1 {
font-size:22px;
margin:0;
font-weight:400;
line-height: 20px;
padding: 20px 2px;
}
a {
color:#404040;
text-decoration:none;
}
a:hover {
color:#101010;
}
.heading {
background:#fff;
border-bottom:1px solid #eee;
min-height:60px;
line-height:60px;
padding:0 10px;
background-color: #00853e;
color: #fff;
}
.listings {
height:100%;
overflow:auto;
padding-bottom:60px;
}
.listings .item {
display:block;
border-bottom:1px solid #eee;
padding:10px;
text-decoration:none;
}
.listings .item:last-child { border-bottom:none; }
.listings .item .title {
display:block;
color:#00853e;
font-weight:700;
}
.listings .item .art-title {
display:block;
color:#00853e;
font-weight:700;
}
.listings .item .garden-title {
display:block;
color:#00853e;
font-weight:700;
}
.listings .item .picnic-title {
display:block;
color:#00853e;
font-weight:700;
}
.listings .item .misc-title {
display:block;
color:#00853e;
font-weight:700;
}
.listings .item .title small { font-weight:400; }
.listings .item.active .title,
.listings .item .title:hover { color:#8cc63f; }
.listings .item .art-title small { font-weight:400; }
.listings .item .art-title:before{ content: url(art-gallery-15-dark-green.svg); }
.listings .item .art-title:hover:before{ content: url(art-gallery-15-light-green.svg); }
.listings .item.active .art-title,
.listings .item .art-title:hover { color:#8cc63f; }
.listings .item .garden-title small { font-weight:400; }
.listings .item .garden-title:before{ content: url(garden-15-dark-green.svg); }
.listings .item .garden-title:hover:before{ content: url(garden-15-light-green.svg); }
.listings .item.active .garden-title,
.listings .item .garden-title:hover { color:#8cc63f; }
.listings .item .picnic-title small { font-weight:400; }
.listings .item .picnic-title:before{ content: url(picnic-site-15-dark-green.svg); }
.listings .item .picnic-title:hover:before{ content: url(picnic-site-15-light-green.svg); }
.listings .item.active .picnic-title,
.listings .item .picnic-title:hover { color:#8cc63f; }
.listings .item .misc-title small { font-weight:400; }
.listings .item .misc-title:before{ content: url(marker-15-dark-green.svg); }
.listings .item .misc-title:hover:before{ content: url(marker-15-light-green.svg); }
.listings .item.active .misc-title,
.listings .item .misc-title:hover { color:#8cc63f; }
.listings .item.active {
background-color:#f8f8f8;
}
::-webkit-scrollbar {
width:3px;
height:3px;
border-left:0;
background:rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
background:none;
}
::-webkit-scrollbar-thumb {
background:#00853e;
border-radius:0;
}
.marker {
border: none;
cursor: pointer;
height: 15px;
width: 15px;
background-image: url(marker-15.svg);
background-color: rgba(0, 0, 0, 0);
}
.marker-f{
border: none;
cursor: pointer;
height: 15px;
width: 15px;
background-image: url(garden-15.svg);
background-color: rgba(0, 0, 0, 0);
}
.marker-a {
border: none;
cursor: pointer;
height: 15px;
width: 15px;
background-image: url(art-gallery-15.svg);
background-color: rgba(0, 0, 0, 0);
}
.marker-r {
border: none;
cursor: pointer;
height: 15px;
width: 15px;
background-image: url(picnic-site-15.svg);
background-color: rgba(0, 0, 0, 0);
}
.clearfix { display:block; }
.clearfix:after {
content:'.';
display:block;
height:0;
clear:both;
visibility:hidden;
}
/* Marker tweaks */
.mapboxgl-popup {
padding-bottom: 50px;
}
.mapboxgl-popup-close-button {
display:none;
}
.mapboxgl-popup-content {
font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
padding:0;
width:300px;
}
.mapboxgl-popup-content-wrapper {
padding:1%;
}
.mapboxgl-popup-content h3 {
background:#91c949;
color:#fff;
margin:0;
display:block;
padding:10px;
border-radius:3px 3px 0 0;
font-weight:700;
margin-top:-15px;
}
.mapboxgl-popup-content h4 {
margin:0;
display:block;
padding: 10px 10px 10px 10px;
font-weight:400;
}
.mapboxgl-popup-content div {
padding:10px;
}
.mapboxgl-container .leaflet-marker-icon {
cursor:pointer;
}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
margin-top: 15px;
}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
border-bottom-color: #91c949;
}
#buttons {
width: 8%;
margin: 0 auto;
}
.button {
display: inline-block;
position: absolute;
right: 5%;
cursor: pointer;
width: 8%;
padding: 8px;
border-radius: 3px;
margin-top: 10px;
font-size: 18px;
text-align: center;
color: #fff;
background: #00853e;
}
.modal {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
background-color: white;
padding: 40px;
margin: auto;
width: 75%;
font-size: 18px;
color: #4f4f4f;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.close-btn {
float: right;
color: black;
font-size: 24px;
}
.close-btn:hover {
color: darkgray;
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
</style>
</head>
<body>
<div class='sidebar'>
<div class='heading'>
<h1>Harris's Montpelier</h1>
</div>
<div id='listings' class='listings'></div>
</div>
<div id='map' class='map'></div>
<ul id="modal-btn">
<li id="button-about" class="button">About</li>
</ul>
<div class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<p>This walking points is based on the self published guidebook, "Travel Walking / Awe Walking In the City of Montpelier", by Harris Webster. The concept of a self-guided walking map was developed and implemented by Montpelier's Complete Streets Committee. This map was developed with a hope to encourage more residents and visitors to enjoy a walk through the Capitol City and discover many of the lesser known treasures beyond Main Street alone. To learn more about the Complete Streets Committee, please visit <a href="https://www.montpelier-vt.org/907/Complete-Streets-Committee", target="_blank">https://www.montpelier-vt.org/907/Complete-Streets-Committee</a>.</p>
</div>
</div>
<script>
// This will let you use the .remove() function later on
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function() {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
};
}
mapboxgl.accessToken = 'pk.eyJ1IjoiZGF2aWQtb3J5IiwiYSI6ImNqdGdkZ3EyajAyeWgzeXAyN3g5ZGRzdHMifQ.5Y-TybBtlTLo6SnQzcZbhQ';
/**
* Add the map to the page
*/
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/david-ory/ckh17eyqx0kg119nmmvy6fzaj',
center: [-72.57227, 44.25938],
zoom: 13,
scrollZoom: true
});
var attractions = {
"type": "FeatureCollection",
"name": "sites_and_sights_v00",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "code": "3B1", "description": "Artisan's Hand Sculptures", "detailed_description": "Sculptures located in front of Artisans’ Hand, a part of City Center on the corner of State and Main Streets. (five larger sculptures, my favorite being the seals; What is your favorite?)", "address": null, "category": "Art" }, "geometry": { "type": "Point", "coordinates": [ -72.575092, 44.260165 ] } },
{ "type": "Feature", "properties": { "code": "3A1", "description": "Gravestones & Sculpted Rock", "detailed_description": "Gravestones and sculpted rock outcroppings in the eastern section of Green Mountain Cemetery (The best well known sculpture of the Green Mountain Cemetery is of the young girl Margaret, which is worth visiting several times, located off the road up the hill on the east or the right side very close to the upper northeastern corner. There is one other nice sculpture of a woman nearby slightly down the east side of the hill from Margaret and another easy to find sculpture in this area is of a mourning woman standing over a lying down figure of Jesus on a rock slab with the label The Resurrection. The rock outcropping which has been sculpted you may want to walk to is also on the eastern side, but is very low next to Route 2.", "address": null, "category": "Art" }, "geometry": { "type": "Point", "coordinates": [ -72.594241, 44.256661 ] } },
{ "type": "Feature", "properties": { "code": "3B12", "description": "Mural", "detailed_description": "On the back of the Montpelier Rec Center there is a Mural entitled Celebrate the Arts. (Which person depicted in the Mural isyour favorite? Mine is the short girl on the stool with the glasses.) P.S. On October 15th I looked at the faded murals on the back of Walgreen’s Pharmacy for the only time in my 24 years here. Except for the obscene\ngraffiti on one panel, the others are sort of fun even though faded. I liked the one with the balloon. I’m tempted to ask Walgreen to spruce them up. Would that be awesome?", "address": null, "category": "Art" }, "geometry": { "type": "Point", "coordinates": [ -72.575572, 44.256801 ] } },
{ "type": "Feature", "properties": { "code": "3A4", "description": "Vermont Arts Council Art Garden", "detailed_description": "A sculpture garden is located on State St. between the Visitor Center and the Arts Council building itself often open with art works displayed; (The sculptures are changed so no specific descriptions are listed here. The Arts Council building was ‘the childhood home of Senator Leahy.’", "address": null, "category": "Art" }, "geometry": { "type": "Point", "coordinates": [ -72.583148, 44.261407 ] } },
{ "type": "Feature", "properties": { "code": "4A8", "description": "Wrought Iron Bench", "detailed_description": "Wrought iron chair-like bench on Terrace] St’s east side just up-north of the Redstone Mansion entrance (My favorite bench; I love the\nhummingbird design.)", "address": null, "category": "Art" }, "geometry": { "type": "Point", "coordinates": [ -72.586253, 44.265517 ] } },
{ "type": "Feature", "properties": { "code": "3A7", "description": "Garden", "detailed_description": "Garden behind the state house accessed on a path just west of the State House", "address": null, "category": "Flora & Fauna" }, "geometry": { "type": "Point", "coordinates": [ -72.580017, 44.262538 ] } },
{ "type": "Feature", "properties": { "code": "1A8", "description": "Rain Gardens", "detailed_description": "The rain garden located near the intersection of Bailey St. and the\nBike Path or Siboinebi River Trail in front of the Vermont State\nEmployees Credit Union (is my favorite Montpelier Rain Gardens. Other\nrain gardens are found at Hunger Mountain Co-op and Union St. School.\nYou can find out more about Montpelier’s Green Storm War\nInfrastructure on a sign at the 133 State St. Parking Lot.)", "address": null, "category": "Flora & Fauna" }, "geometry": { "type": "Point", "coordinates": [ -72.585044, 44.260944 ] } },
{ "type": "Feature", "properties": { "code": "2B3", "description": "Red Oaks", "detailed_description": "‘Another original farm house’ located one lot north (or down the hill) from #203 on the western side Berlin St. (‘nicely refurbished according to renter’)", "address": "218 Berlin St", "category": "Flora & Fauna" }, "geometry": { "type": "Point", "coordinates": [ -72.567195, 44.246839 ] } },
{ "type": "Feature", "properties": { "code": "4A14", "description": "Silver Maple", "detailed_description": "Silver Maple tree at 43 Terrace St. and a nice tree (cottonwood?) at 45 Terrace", "address": "43 Terrace St", "category": "Flora & Fauna" }, "geometry": { "type": "Point", "coordinates": [ -72.587217, 44.267049 ] } },
{ "type": "Feature", "properties": { "code": "1D4", "description": "Spruce Trees", "detailed_description": "Trees located at #2 Hillcrest Dr off Colonial Drive (Three different bluish colored Spruce species in the front yard, etc.)", "address": "2 Hillcrest Dr", "category": "Flora & Fauna" }, "geometry": { "type": "Point", "coordinates": [ -72.580783, 44.246732 ] } },
{ "type": "Feature", "properties": { "code": "1D2", "description": "Tiger Tail Spruce", "detailed_description": "HGD located at 116 Northfield St. (especially the huge Tiger Tail Spruce, and gardens)", "address": "116 Northfield St", "category": "Flora & Fauna" }, "geometry": { "type": "Point", "coordinates": [ -72.58087, 44.251085 ] } },
{ "type": "Feature", "properties": { "code": "3B13", "description": "Tree", "detailed_description": "Catalpa tree located on the eastern side yard of #31 E. State St. (Note the big leaves.)", "address": "31 E State Street", "category": "Flora & Fauna" }, "geometry": { "type": "Point", "coordinates": [ -72.573589, 44.259323 ] } },
{ "type": "Feature", "properties": { "code": "3C3", "description": "Tree", "detailed_description": "Large Gingko tree located outside the brick office building at #143 Barre St. (one of my favorite two trees in Montpelier; After you have viewed several trees, what is your favorite tree or trees.)", "address": "143 Barre", "category": "Flora & Fauna" }, "geometry": { "type": "Point", "coordinates": [ -72.572657, 44.255038 ] } },
{ "type": "Feature", "properties": { "code": "4A15", "description": "Tulip Tree", "detailed_description": "HGD at the northwest corner of Clarendon Ave. and Dwinell St. (I was informed this was built in the Edwardian style, perhaps because it was a fine home built in the very early 20th century when Edward was Britain’s King. Edwardian homes according online sources are more difficult to identify, but this home does feature gardens including a permaculture garden, balconies and porches often typical features of this style. There is a small to medium nut tree. I believe I was told it was a black walnut tree, but I very well might be wrong.)", "address": "Liberty @ College St", "category": "Flora & Fauna" }, "geometry": { "type": "Point", "coordinates": [ -72.562443, 44.258185 ] } },
{ "type": "Feature", "properties": { "code": "3B3", "description": "City Hall Clock", "detailed_description": "Montpelier City Hall: Most Montpelier residents know well the City Hall, but I imagine few have viewed the massive mechanical clock inside in the tower. After the Pandemic, a small group may request the City Hall’s custodian to take you up inside the tower as he did for a small group on a ‘Walks with Harris.’ Maybe you will be lucky as wewere or maybe not.", "address": null, "category": "Miscellany" }, "geometry": { "type": "Point", "coordinates": [ -72.575832, 44.259307 ] } },
{ "type": "Feature", "properties": { "code": "3D1", "description": "College Hall, CFA", "detailed_description": "College Hall the dominant CFA Building next to the CFA Commons (Note in the office on the left side on the main entrance you probably can pick up the Self-Guided Historical Walking Tour of most of the current college buildings. Climb the stairs to see the high ceiling marvelous auditorium with organ, and if you are lucky you can enlist\nthe help of the responsible administrator person to take a small group of walkers to the lookout room on the roof.)", "address": "36 College Street", "category": "Miscellany" }, "geometry": { "type": "Point", "coordinates": [ -72.56773, 44.255095 ] } },
{ "type": "Feature", "properties": { "code": "4C12", "description": "Elm Court Park", "detailed_description": "Elm Court Park located at NW Corner of Elm and Court St. (‘a small is beautiful’ parklet on a busy corner selected because busy corners need beauty also)", "address": null, "category": "Miscellany" }, "geometry": { "type": "Point", "coordinates": [ -72.575521, 44.261749 ] } },
{ "type": "Feature", "properties": { "code": "3C10", "description": "Historic Mansion & Hidden Walkway", "detailed_description": "A large historical mansion (in index listed as historical home) at 100 East State St. (‘built by those with wealth from granite manufacturing at the turn of the19th-20th century, a building fulfilling several different functions from a college dorm to a college president’s home and now a center for a law firm.’ It has a hidden 3 level stone walk entrance well below the main entrance, an impressive pine in front of mansion and you may scare up a large number of deer in a deer yard behind the mansion. However, it is not recommended for ordinary walkers to explore the many unpathed slopes of these woods.)", "address": null, "category": "Miscellany" }, "geometry": { "type": "Point", "coordinates": [ -72.56958, 44.257706 ] } },
{ "type": "Feature", "properties": { "code": "4B5", "description": "Meditation Park", "detailed_description": "Mini meditation park ‘Courage of Blooms’ (off the west side of #10 Baldwin St., where a Queen Anne’s Style building of a state office building is located (nice benches, sculpture and engraved poems in this meditative park)", "address": "10 Baldwin St", "category": "Miscellany" }, "geometry": { "type": "Point", "coordinates": [ -72.582823, 44.262832 ] } },
{ "type": "Feature", "properties": { "code": "1A5", "description": "Dog River Confluence", "detailed_description": "Another view of the Dog River: If you continue down Dog River\nRd. after breaking off from the road which goes to the Amtrak Station,\nyou will come to the Dog River Sport Fields and Dog Park. Cross the\nfields toward the river and nearby some discarded soccer nets toward\nthe eastern side of the field, you will come to a clear but narrow path\ndown to the river bank. (There looks like there maybe another path\ngoing to same basic view, but I have not tried it.)", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.601201, 44.25598 ] } },
{ "type": "Feature", "properties": { "code": "4D1", "description": "Hubbard Park Access", "detailed_description": "As mentioned, Hubbard Park is both well-known to Montpelier folk with many well-marked trails (finally) which are not often noted] in this booklet. However, I am including in Sub Area 4D a path from the south side of Finch Rd (formerly known as City Dump Road) almost directly across from the entrance to the North Branch Nature Center). There is a fairly clear trailhead sign a just short distance from the Elm St.-Finch Rd. intersection eventually heading up to the well-known New Shelter. The trail is fairly easy to follow except in fall foliage season when once I got lost for a short while. This trail seems not as poplar, but has some nice views of more than the dump. Also, it has at least one marked side trail back to North Park St. and Elm.", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.576011, 44.28463 ] } },
{ "type": "Feature", "properties": { "code": "4C5", "description": "Mill Pond Park", "detailed_description": "Two other views of the North Branch, one from a public-canoe launching mini park (no sidewalk access) between Summer St. and Pearl St.’s intersection with Elm St.; another but a different narrow perspective view of the North Branch from the sidewalk of the house just north of Birchgrove Bakery (also a pleasant view of its side yard seen through some evergreen trees.)", "address": "337 Elm St", "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.569408, 44.268113 ] } },
{ "type": "Feature", "properties": { "code": "3B4", "description": "Park Access", "detailed_description": "HGD #27 East State St. (narrow, small home on small lot packed with flowers; small is beautiful)", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.573874, 44.258325 ] } },
{ "type": "Feature", "properties": { "code": "4A11", "description": "Redstone Entrance Gate", "detailed_description": "Redstone’s Entrance Gate to a path up to the Redstone Mansion, the gate being at the west end of Baldwin St. off Terrace Rd. (the Mansion has a long interesting history. I recommend you read it after ‘googling’ Redstone Mansion, Montpelier.)", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.585282, 44.263598 ] } },
{ "type": "Feature", "properties": { "code": "1B6", "description": "Trail Access", "detailed_description": "Garden located on the left side of the home at the dead-end of the\neastern side of Pleasant St. (If you see the homeowner, he\/she may let\nyou walk on the path through the garden to a nice view point toward\nHubbard Park Hill.)", "address": "29 Pleasant St", "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.576036, 44.253694 ] } },
{ "type": "Feature", "properties": { "code": "1B8", "description": "Trail Access", "detailed_description": "Steep Trail in Woods to National Life Hill: Find one end of path at\nthe southwest corner of Memorial Drive and Northfield St. and climb.\nJust before the National Life Complex, this trail bumps into the National\nLife Exercise Trail which itself bears left. At that point turn right and\nhead to the Vt. Fish and Game Building in the National Life complex.\nThe path can be reversed.", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.578032, 44.257591 ] } },
{ "type": "Feature", "properties": { "code": "1C3", "description": "Trail Access", "detailed_description": "Lengthy trails in the National Life’s Woods trails called Rob’s Trails:\nGo to the end of Mountain View Street’s western dead-end, past an\nopen or shut gate, then past the walled Electrical Transfer Station and\nfind a descending trail. It is best to take the first right diversion down\nthe hill to a dying Langdon Pond as this is the easiest path. The other\ndiversion will get you down as well. In both cases take a right turn on a\nflat path past the dying pond, across a short wooden bridge until you\ncome to the Rob’s Trails sign. There are multiple Rob’s Trails. From the\ntrail sign I recommend: go up the trail and follow ribbon markers and\neventually explore the variety of trails. You may cross the major stone\nwall and continue quite a ways until you can see fields lying west of\nNorthfield St., then return on the same path or continue and the path\nwill circle back a different way to the stone wall. If you get lost beyond\nthe stone wall, first get back to it. If you get lost either after returning\n\n19\npast the stone wall or without passing through the stone wall in the\nfirst place, just head back and down some trail towards the sounds of\ntraffic to the pond path and then up the now ascending path you came\nin by. It helps to observe during your original descent the place where\nthe pond path will take a 90 degree turn up the hill. Essentially after\npassing the pond, find a path up the hill. I’ve gotten lost a few times,\nbut following the above ‘up and down directions’ have gotten me back\nfairly easily. (Note I’ve talked to National Life people who slightly\nreluctantly said it’s OK, but don’t encourage large crowds as these\nwoods owned by National Life is primarily for its nearby employees.\nSince I’ve never have had large crowds on the many walks I’ve led there\nand since National Life is such a good community supporter, I strongly\nrecommend small groups do take the walks, ideally with National Life\nemployees.", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.587457, 44.25486 ] } },
{ "type": "Feature", "properties": { "code": "1D1", "description": "Trail Access", "detailed_description": "Paths in Woods of the Hill Farm Hill between Northfield and Hill\nSt. There are several entrances but I think the easiest to find is to walk\nup a driveway directly across the street from Econo-Lodge on\nNorthfield St. right by a blue, decorated gate, up a driveway to an\napartment building and you will come to an old barn (my favorite barn)\nlocated at the end of the driveway where you take a left along a\ndriveway-like road which fairly soon turns into a path or trail. From\nthere ascend the path up the Hill Farm Hill where it intersects with\nanother path. Take a right along a valley and beyond through its lovely\nwoods. On the path you will see an interesting cairn, and other objects\nas well, and bump into other paths to other entrances including one\ndown to Hill St. and one to another spot-on Northfield St. if you turn\nleft instead of right after your first ascension, the path will go to\nPleasant St. If you go right at the first main intersection as most people\ngo, eventually you will come to the ‘Hill Farm. It is bounded by definite\nNo Trespassing Signs in front of a barrier fence. Many neighborhood\nfolks walk in these woods (not the field) and some have said ‘the\nabsent-from-Montpelier owner has no objection to responsible\nwalkers.’ Because of the many paths, be alert so you can return the\nway you came in or be adventurous and see where you end up.", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.580188, 44.251659 ] } },
{ "type": "Feature", "properties": { "code": "2D6", "description": "Trail Access", "detailed_description": "Path in an undeveloped city park and its neighboring woods. Trail beginning: At the very end of Hebert St. opposite Stone Meadows Condos, there is a distinct path which takes you up to the open field of the city park. At that point the path disappears but walking along the edge of the open areas next to the woods. you will come to a path which descends into the woods: the woods itself descends minus a trail to the Barre-Montpelier Rd. Fairly soon you will come to a path to the left which will take you to the bottom of Isabel Circle. The paths forward which meander sidewards and downwards gradually fade out. Beyond, bush- wacking is possible, but I have not done extensive bush-wacking so you are on your own if you do so.", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.558225, 44.24299 ] } },
{ "type": "Feature", "properties": { "code": "5D6", "description": "Trail Access", "detailed_description": "Path to connect with Sabin’s Pasture trails through to the Elks Club\nGolf Course; Across from a small square house on the corner of\nGreenock and Dyer there is a mowed path through a field continuing to a short path through woods which bumps into the Sabin’s Pasture to 50 Elk Golf Club trails. Bear to the right on the short path before you get to the main trail and on the way back bear to the left on the short trail. Note the location of the key turn as there are a few other ways to head back toward streets connected to the Towne Hill Rd area. You will need to do some exploring as there is more than one paths on this corridor of paths. The views are spectacular especially on the Sabin’s Pasture trails. Remember you can enter also behind the College of Fine Arts as described in 3D designations, but this Greenock entry has fewer climbing challenges.", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.551858, 44.256751 ] } },
{ "type": "Feature", "properties": { "code": "1B10", "description": "Viewpoint", "detailed_description": "Views in many directions from the National Life Car Ramp at the\nfar end of the National Life Complex: Middlesex Hills, Lower State St.\nRidge, Hubbard Park Hill, Worcester Range, and looking down on\nMontpelier you can see much of Montpelier City but not the State\nHouse (possibly viewable after the leaves are off.)", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.582043, 44.257906 ] } },
{ "type": "Feature", "properties": { "code": "5D10", "description": "Water Tower", "detailed_description": "Path in woods beyond the Water Tower which is located at the end of an unnamed public road with gate off the private Connor Rd. While on Connor Rd if asked (I’ve walked there many times and have never been asked) why you are there, tell them you are walking to the Water Tower. As you circle the Water Tower you will see a trail in the the woods eventually to an open field which then circles back to the Water tower. There is another trail south of the Water Tower which heads east that I have never gone on.", "address": null, "category": "Recreation" }, "geometry": { "type": "Point", "coordinates": [ -72.548747, 44.265533 ] } }
]
};
/**
* Assign a unique id to each store. You'll use this `id`
* later to associate each point on the map with a listing
* in the sidebar.
*/
attractions.features.forEach(function(attraction, i){
attraction.properties.id = i;
});
/**
* Wait until the map loads to make changes to the map.
*/
map.on('load', function (e) {
/**
* This is where your '.addLayer()' used to be, instead
* add only the source without styling a layer
*/
map.addSource("places", {
"type": "geojson",
"data": attractions
});
/**
* Add all the things to the page:
* - The location listings on the side of the page
* - The markers onto the map
*/
buildLocationList(attractions);
addMarkers();
});
/**
* Add a marker to the map for every store listing.
**/
function addMarkers() {
/* For each feature in the GeoJSON object above: */
attractions.features.forEach(function(marker) {
/* Create a div element for the marker. */
var el = document.createElement('div');
/* Assign a unique `id` to the marker. */
el.id = "marker-" + marker.properties.id;
/* Assign the `marker` class to each marker for styling. */
if (marker.properties.category == "Flora & Fauna") {
el.className = 'marker-f'
} else if (marker.properties.category == "Art") {
el.className = 'marker-a'
} else if (marker.properties.category == "Recreation") {
el.className = 'marker-r'
} else {
el.className = 'marker'
}
/**
* Create a marker using the div element
* defined above and add it to the map.
**/
new mapboxgl.Marker(el, { offset: [0, 0] })
.setLngLat(marker.geometry.coordinates)
.addTo(map);
/**
* Listen to the element and when it is clicked, do three things:
* 1. Fly to the point
* 2. Close all other popups and display popup for clicked store
* 3. Highlight listing in sidebar (and remove highlight for all other listings)
**/
el.addEventListener('click', function(e){
/* Fly to the point */
flyToStore(marker);
/* Close all other popups and display popup for clicked store */
createPopUp(marker);
/* Highlight listing in sidebar */
var activeItem = document.getElementsByClassName('active');
e.stopPropagation();
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
var listing = document.getElementById('listing-' + marker.properties.id);
listing.classList.add('active');
});
});
}
/**
* Add a listing for each store to the sidebar.
**/
function buildLocationList(data) {
data.features.forEach(function(store, i){
/**
* Create a shortcut for `store.properties`,
* which will be used several times below.
**/
var prop = store.properties;
/* Add a new listing section to the sidebar. */
var listings = document.getElementById('listings');
var listing = listings.appendChild(document.createElement('div'));
/* Assign a unique `id` to the listing. */
listing.id = "listing-" + prop.id;
/* Assign the `item` class to each listing for styling. */
listing.className = 'item';
/* Add the link to the individual listing created above. */
var link = listing.appendChild(document.createElement('a'));
link.href = '#';
link.className = 'title';
if (prop.category == "Art"){
link.className = 'art-title'
} else if (prop.category == "Flora & Fauna") {
link.className = 'garden-title'
} else if (prop.category == "Recreation") {
link.className = 'picnic-title'
} else if (prop.category == "Miscellany") {
link.className = 'misc-title'
}
link.id = "link-" + prop.id;
link.innerHTML = " " + prop.category;
/* Add details to the individual listing. */
var details = listing.appendChild(document.createElement('div'));
details.innerHTML = prop.description;
if (prop.code) {
details.innerHTML += ' (' + prop.code + ')';
}
/**
* Listen to the element and when it is clicked, do four things:
* 1. Update the `currentFeature` to the store associated with the clicked link
* 2. Fly to the point
* 3. Close all other popups and display popup for clicked store
* 4. Highlight listing in sidebar (and remove highlight for all other listings)
**/
link.addEventListener('click', function(e){
for (var i=0; i < data.features.length; i++) {
if (this.id === "link-" + data.features[i].properties.id) {
var clickedListing = data.features[i];
flyToStore(clickedListing);
createPopUp(clickedListing);
}
}
var activeItem = document.getElementsByClassName('active');
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
this.parentNode.classList.add('active');
});
});
}
/**
* Use Mapbox GL JS's `flyTo` to move the camera smoothly
* a given center point.
**/
function flyToStore(currentFeature) {
map.flyTo({
center: currentFeature.geometry.coordinates,
zoom: 18
});
}
/**
* Create a Mapbox GL JS `Popup`.
**/
function createPopUp(currentFeature) {
var popUps = document.getElementsByClassName('mapboxgl-popup');
if (popUps[0]) popUps[0].remove();
var popup = new mapboxgl.Popup({closeOnClick: true})
.setLngLat(currentFeature.geometry.coordinates)
.setHTML('<h3>' + currentFeature.properties.category + '</h3>' +
'<h4>' + currentFeature.properties.detailed_description + '</h4>')
.addTo(map);
}
document
.getElementById('modal-btn')
.addEventListener('click', function (event) {
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modal.style.display = "block"
closeBtn.onclick = function(){
modal.style.display = "none"
}
window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}
});
</script>
</body>
</html>