-
Notifications
You must be signed in to change notification settings - Fork 0
/
leafletpage.html
103 lines (82 loc) · 2.33 KB
/
leafletpage.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>Leaflet Web Map</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#title {
margin:30px;
text-align: center;
color: white;
}
#map {
margin: 150px auto 30px auto;
width: 960px;
height:500px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
#button {
float: left;
margin: 10px;
width: 200px;
height:25px;
background-color: #4CAF50; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
cursor: pointer;
}
#button-frame {
margin: auto auto 30px auto;
width: 960px;
height:50px;
}
#header {
width:100%;
height:100px;
position:absolute;
top:0;
background-color:#4CAF50;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
#text {
margin: auto;
width: 960px;
height:300px;
}
</style>
</head>
<body>
<div id="header">
<H1 id="title">North West Territories Communities' Forest Coverage Loss</H1>
</div>
<div id="map"></div>
<div id="button-frame">
<div><button id="button" onclick='setCenterBeh()'>Move to Behchokǫ̀</button></div>
<div><button id="button" onclick='setCenterYn()'>Move to Yellowknife</button></div>
</div>
<div id="text">
<p>GP487 A1</p>
</div>
<script>
var map = L.map('map',{
center: [62.442222,-114.394722],
zoom: 12
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
function setCenterBeh() {
map.panTo([62.8025,-116.046389])
}
function setCenterYn() {
map.panTo([62.442222,-114.394722])
}
</script>
</body>
</html>