-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
555 lines (438 loc) · 20.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
<!DOCTYPE html>
<html lang="en">
<head>
<title> Parks in Hamilton City </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- StAuth10244 : I Utsavkumar Patel, 000820474 certify that this material is my original work.
No other person's work has been used without due acknowledgement.
I have not made my work available to anyone else."
--->
<!-- --- BootStrap libraries with other one -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* The height and width of the div will become the dimensions of the map! */
#map {
height: 600px;
width: 1400px;
}
body {
height: 100%;
margin: 0;
padding: 0;
font-family: cursive;
font-size: larger;
background-color:rgb(180, 125, 85);
}
#result_msg{
font-size: large;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bolder;
font-size: larger;
text-align: center;
}
h1{
font-family: 'Courier New', Courier, monospace;
font-size:55px;
font-weight: bold ;
color:rgb(184, 58, 196);
background-color: black;
}
.btncolor{
background-color: rgb(105, 132, 133);
border-radius: 12px;
color: black;
border: 2px solid #e7e7e7;
padding: 10px 20px;
}
.btncolor2{
background-color: rgb(212, 53, 41);
border-radius: 12px;
color: black;
border: 2px solid #e7e7e7;
padding: 10px 20px;
}
#copywright{
background-color: black;
color: whitesmoke;
text-align: center;
}
.btncolor1{
background-color: rgb(49, 175, 192);
border-radius: 12px;
color: black;
border: 2px solid #e7e7e7;
padding: 10px 20px;
}
.btncolor3{
background-color: rgb(54, 151, 57);
border-radius: 12px;
color: black;
border: 2px solid #e7e7e7;
padding: 10px 20px;
}
.r-btncolor{
background-color: rgb(193, 207, 65);
border-radius: 12px;
color: black;
border: 2px solid #e7e7e7;
padding: 10px 20px;
}
.btncolor-g{
background-color: rgb(170, 49, 150);
border-radius: 12px;
color: black;
border: 2px solid #e7e7e7;
padding: 10px 20px;
}
</style>
</head>
<body>
<!-- Maps Title -->
<div class="jumbotron text-center">
<h1>Explore Parks in Hamilton</h1>
</div>
<!-- Map div -->
<div id="map"></div>
<br />
<span id="result_msg" text-align="center"></span>
<div class="jumbotron text-center">
<!-- button properties
<button id="all_parks" class="btncolor">ALL Parks</button>
-->
<button id="walkway" class="btncolor">Walkway Park</button>
<button id="waterfront" class="btncolor1">Waterfront Park</button>
<button id="sports" class="btncolor3">Sports Park</button>
<button id="undev" class="btncolor2">Undeveloped Park</button>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------->
<br /><br/><br/>
<button id="home" class="btncolor-g"> Geolocate </button> <strong> OR</strong>
<strong style="font-size:22px; color:rgb(11, 22, 124);"> Start : </strong>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------->
<input type="text" id="address" placeholder="XYZ St, Hamilton, On L84 3G6" size="30" style="font-size:22px;">
<div id="floating-panel"><br>
<strong style="font-size:22px; color:rgb(11, 22, 124);"> End : </strong>
<!-------------------- Park DropDown Selection as a destination-------------------------------------------------------------------------------------------------------------------------------------->
<select id="end" width="30px">
<option value="Meadowlands, Hamilton, ON L9K 1P8">Joshua Ave Park</option>
<option value="1 Hughson St S, Hamilton, ON L8N, Canada">Gore Park</option>
<option value="500 King St W, Hamilton, ON L8R">Victoria Park</option>
<option value="64 Leander Dr, Hamilton, ON L8L 1N6">Pier 4 Park</option>
<option value="885 Mountain Brow Blvd, Hamilton, ON L8W 1R6">Albion Falls Park</option>
<option value="96 Mary St, Hamilton, ON L8R 1K4">Beasley Park</option>
<option value="115 E 26th St, Hamilton, ON L8V 3L5">Eastmount Park</option>
<option value="300 Roxborough Ave, Hamilton, ON L8H 4M3">A.M. Cunningham Park</option>
<option value="52 Amberwood Street, Hamilton, ON L8J 2H9">Albion Estates Park</option>
<option value="200 Harbour Front Dr, Hamilton, ON L8L 1C8">Bayfront Park</option>
<option value="1000 Main St E, Hamilton, ON L8M 1N2">Gage Park</option>
<option value="255 Concession St, Hamilton, ON L9A 1B2">Sam Lawrence Park</option>
</select>
</div>
<br /><br/>
<button id="remove_location" class="r-btncolor">Remove Geolocation</button>
<!---------------------------Print page view by calling the window.print() method--------------------------------------->
<button onclick="window.print()" class="btncolor3">Print Page</button>
<button id="refresh" class="btncolor1">Refresh Page</button>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------->
<!-- Copyright information footer-->
<footer id="copywright" > Copyright @Utsavkumar Patel </footer>
<!----------------- Google Maps WebAPI ----------------------------->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbsua4EskTMpwMIvO5vkvTgw35rhCwTfs&callback=initMap">
</script>
<!------------------ JS Part ----------------------------->
<script src="park.js"></script>
<script>
// global variables
var map, markers = [];
y = document.getElementById("result_msg");
// All References Links are included here for this Assignment :
// https://developers.google.com/maps/documentation/javascript/overview
// https://developers.google.com/maps/documentation/javascript/cloud-setup
// https://developers.google.com/maps/documentation/javascript/get-api-key
// https://developers.google.com/maps/documentation/javascript/directions
// https://developers.google.com/maps/documentation/javascript/examples/directions-simple
// https://www.w3schools.com/
// https://kml4earth.appspot.com/icons.html
// https://www.w3schools.com/bootstrap4/default.asp
// The initMap() function will be called when the above Google Maps JS
// library finishes loading. Notice the URL parameter callback=initMap,
// this is how the library knows to call this initMap function when it
// is done loading. We could change the name of the function in that
// URL if we wanted to call it something different.
function initMap()
{
// services used to provide directions
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
// Latitude & Longitude focusing on maps of hamilton area
hamilton_focus = { lat: 43.2574, lng: -79.8721 };
// This will create a new Google Map object, and the variable map will
// contain a reference to the object. The first argument is the element
// to place the map into, and the 2nd argument is a JSON with keys and
// objects describing how to make the map. At a minimum we need to
// provide center and zoom values as part of this object.
map = new google.maps.Map(document.getElementById("map"),
{
//hamilton focus area when map loads
center: hamilton_focus,
zoom:11, //Zoom level
});
// have the directions renderer work with this map
directionsRenderer.setMap(map);
//function call
const onChangeHandler = function () {
calculateAndDisplayRoute(directionsService, directionsRenderer);
};
// Set addEventListener on the Start as a origin and End as a destination
document.getElementById("address").addEventListener("change", onChangeHandler)
document.getElementById("end").addEventListener("change", onChangeHandler);
//set map zoom level
map.setZoom(12);
// create the infowindow... we only create ONE infowindow and move it
// around and set its content when a marker is clicked as need be.
infowindow = new google.maps.InfoWindow();
// when marker is clicked on the location it shows the information about the park locations
marker_clicked = function() {
//infowindow widget to display information about the park
infowindow.setContent(this.STRING);
//infowindow open
infowindow.open(map, this);
//set map zoom level
new_marker.setZoom(12);
}
// put markers on the map for all the parks in park.js
for (i = 0; i < park.length; i++)
{
// set the icon based on the TYPE of the parks in hamilton
if (park[i].TYPE == "Waterfront")
new_icon = "https://maps.google.com/mapfiles/kml/shapes/picnic.png";
else if (park[i].TYPE == "Sports")
new_icon = "http://maps.google.com/mapfiles/kml/shapes/play.png";
else if (park[i].TYPE == "Walkway")
new_icon = "https://maps.google.com/mapfiles/kml/shapes/parks.png"
else
new_icon = "https://maps.google.com/mapfiles/kml/shapes/caution.png";
// create the marker based on the array in the park.js file
new_marker = new google.maps.Marker({
position: {
lng: park[i].LONGITUDE,
lat: park[i].LATITUDE
},
icon: new_icon,
});
// put the marker onto the map
new_marker.setMap(map);
// store the name of the park as a property of the marker object
new_marker.NAME = park[i].NAME;
// store the TYPE of the park as a property of the marker object
new_marker.TYPE = park[i].TYPE;
// have the info window open when the marker is clicked...
new_marker.addListener('click', marker_clicked);
// pushing data to markers array
markers.push(new_marker);
new_marker.STRING = "<h3> " + park[i].NAME + "</h3>" +"<br>" +
" Owner Name : " + park[i].OWNER_NAME + "<br>" +
" Classification :" + park[i].CLASSIFICATION + "<br>" +
" Park Type : " + park[i].TYPE + "<br>" +
" Zoning code : " + park[i].ZONING_CODE ;
// geocoder service object
geocoder = new google.maps.Geocoder();
}
}
//calculateAndDisplayRoute function is used to show direction in driving mode between the starting location to end
function calculateAndDisplayRoute(directionsService, directionsRenderer) {
directionsService
.route({
//Staring location query
origin: {
query: document.getElementById("address").value,
},
//destination query
destination: {
query: document.getElementById("end").value,
},
//set driving mode as a travel mode
travelMode: google.maps.TravelMode.DRIVING,
})
.then((response) => {
directionsRenderer.setDirections(response);
})
// error message appear when user haven't entered starting location
.catch((e) => window.alert(" Please select the starting location " + status));
}
// showPositionOnMap function shows the users current position on maps
function showPositionOnMap(position)
{
// create a marker centered at the user's location
user_location = new google.maps.Marker({
position: {
lat: position.coords.latitude,
lng: position.coords.longitude
},
title: "Your Live Location",
icon: "https://maps.google.com/mapfiles/kml/shapes/homegardenbusiness.png",
});
// put the marker onto the map (it will not appear otherwise)
user_location.setMap(map);
// show result msg after the map with changing text css properties
y.style.color = "darkblack";
// put the latitude and longitude on the page as text
y.innerHTML = " <strong>Check Your Live Location is on google maps which is shown by yellow icon...!! <br>" +
" <span>and Latitude & Longitude are : </span></strong><br> " +
position.coords.latitude + ", " +
position.coords.longitude;
}
// clear the user's current location on maps by clicking the remove home button
document.getElementById("remove_location").onclick = function()
{
// remove the user's current location marker from the maps
user_location.setMap(null);
// remove the result message ..
y.innerHTML = "";
}
// click event on home button when user click shows current location of user on map
document.getElementById("home").onclick = function()
{
if (navigator.geolocation)
{
// call showPositionOnMap after finding the user's current location
navigator.geolocation.getCurrentPosition(showPositionOnMap,showError);
}
else
{
// show error message that geolocation is not supported by the browser
y.innerHTML = "Geolocation is not supported by your browser!";
}
}
// filterWalkwayPark function to filter and shpw only Walkway Park marker on the map
function filterWalkwayPark()
{
for (i = 0; i < markers.length; i++)
{
// filtering Walkway type parks from markers array
if (markers[i].TYPE == "Walkway")
{
// putting only walkway parks marker on the map
markers[i].setMap(map);
}
else
{
// take off other markers from the map
markers[i].setMap(null);
}
}
}
// calling the filterWalwayPark function on button click
document.getElementById("walkway").onclick = filterWalkwayPark;
// filterWaterfrontPark function to filter and put only Waterfront Park marker on the map
function filterWaterfrontPark()
{
for (i = 0; i < markers.length; i++)
{
// filtering Waterfront type parks from markers array
if (markers[i].TYPE == "Waterfront")
{
// putting only waterfront parks marker on the map
markers[i].setMap(map);
}
else
{
// take off other markers from the map
markers[i].setMap(null);
}
}
}
// calling the filterWaterfrontPark function on button click
document.getElementById("waterfront").onclick = filterWaterfrontPark;
// filterSportsPark function to filter and put only Sports Park on the map
function filterSportsPark()
{
for (i = 0; i < markers.length; i++)
{
// filtering Sports type parks from markers array
if (markers[i].TYPE == "Sports")
{
// putting only sports parks marker on the map
markers[i].setMap(map);
}
else
{
// take off other markers from the map
markers[i].setMap(null);
}
}
}
// calling the filterSportsPark function on button click
document.getElementById("sports").onclick = filterSportsPark;
// filterUndevelopedPark function to filter and put only UndevelopedPark marker from the map
function filterUndevelopedPark()
{
for (i = 0; i < markers.length; i++)
{
// filtering Undeveloped type parks from markers array
if (markers[i].TYPE == "Undeveloped")
{
// showing only Undeveloped park marker on the map
markers[i].setMap(map);
}
else
{
// take off other markers from the map
markers[i].setMap(null);
}
}
}
// calling the filterUndevelopedPark function on button click
document.getElementById("undev").onclick = filterUndevelopedPark;
// showAllParks function to display all parks on the map
function showAllParks()
{
// calling the init method to load maps with all park markers
initMap();
// select zoom level to the park showing area
map.setZoom(12);
}
// calling the showAllParks function on button click
document.getElementById("all_parks").onclick = showAllParks;
// refreshPage function to refresh the page and maps with clearing input and other screen locations
function refreshPage(){
// calling the init method to load maps with all park markers
initMap();
// Clearing the msg text if have already from previous search
y.innerHTML = "";
// clearing the input box value if previously entered
address.value = null;
}
// calling the refreshPage function to reset everything on refresh button click
document.getElementById("refresh").onclick = refreshPage;
// showError function
function showError(error) {
// set text color to be red
y.style.color = "darkred";
switch(error.code) {
// permission denied error
case error.PERMISSION_DENIED:
y.innerHTML = "Error : User denied the request for Geolocation..!"
break;
// Position unavailable error
case error.POSITION_UNAVAILABLE:
y.innerHTML = "Error : Location information is unavailable..!"
break;
// Time out error
case error.TIMEOUT:
y.innerHTML = "Error : The request to get user location timed out..!"
break;
// Unknown error
case error.UNKNOWN_ERROR:
y.innerHTML = "Error : An unknown error occurred..!"
break;
}
}
</script>
</body>
</html>