-
Notifications
You must be signed in to change notification settings - Fork 0
/
SHClosures.html
103 lines (82 loc) · 3.34 KB
/
SHClosures.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
<!DOCTYPE html>
<html>
<head>
<title>NZ Road Info | State Highway Closures and Warnings.</title>
<link rel="shortcut icon" href="traffic-cone.ico">
<link rel="shortcut icon" href="traffic-cone.png">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/slicknav.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script type="text/javascript">
//global variables
var map;
var infowindow = new google.maps.InfoWindow();
// declare namespace
var nzRoadInfo = {};
//function that runs when the page loads
nzRoadInfo.initialize = function() {
//center lat/lon
var latlng = new google.maps.LatLng(-41, 173);
//map configutations
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//create the map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//load geojson layer
map.data.loadGeoJson('json/SHClosures.json');
// When the user clicks, open an infowindow
map.data.addListener('click', function(event) {
var myHTML = "<h4>Road Event ID: ";
myHTML += event.feature.getProperty("id");
myHTML += "</h4></br><h4>Description: ";
myHTML += event.feature.getProperty("description");
myHTML += "</h4></br><h4>Status: ";
myHTML += event.feature.getProperty("status");
myHTML += "</h4>";
infowindow.setContent("<div style='width:250px;'>" + myHTML + "</div>");
// position the infowindow on the marker
infowindow.setPosition(event.latLng);
// anchor the infowindow on the marker
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -30)
});
infowindow.open(map);
});
// var marker = new google.maps.Marker({
// position: map.getCenter(),
// icon: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-icon-2x.png',
// map: map
// });
map.data.setStyle({
fillColor: 'red',
strokeWeight: 5,
strokeColor: 'red',
fillOpacity: 0.5
});
}
</script>
</head>
<!-- body of the page with an onload to run the initialize function -->
<body onload="nzRoadInfo.initialize()">
<div id="menu-wrapper">
<ul id="menu">
<li><a class="scroll" href="index.html">About</a></li>
<li><a class="scroll" href="#">State Highways - closures and warnings</a></li>
<li><a class="scroll" href="contact.php">Contact Us - Suggestions, Bug Reporting, Happy Thoughts!</a></li>
</ul>
</div>
<div id="map_canvas"></div>
<script>
$('#menu').slicknav({
prependTo: "#menu-wrapper",
label: ""
});
</script>
</body>
</html>