-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (117 loc) · 3.65 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
<!DOCTYPE html>
<!--Theo's 2.2.1 revamp-->
<html>
<head>
<meta charset=utf-8 />
<title>Fire History</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script type="text/javascript" src="moment.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<!--utilizes default mapbox.css 2.2.1 styles-->
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.footer{
position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoic2x1Z2lzIiwiYSI6IlB5TlZENVUifQ.Z597Ia0qffZlYcGpbJtzTA';
//initialize map
var map = L.mapbox.map('map', 'slugis.25db57b7', {
// Disable default dblclick for later enhancement
doubleClickZoom: false
})
.setView([37.2, -121], 6)
.on('dblclick', function(e) {
// Improve double click behavior from default
map.setView(e.latlng, map.getZoom() + 1);
});
/**
* Convert alarm_date to a useable date string for popup
* using moment.js
*
* @param alarm_date alarm_date number from gridlayer
* @return formatted date String
*/
function getDate(alarm_date) {
var dateString = moment(alarm_date.toString(), "YYYYMMDD");
var formatted = dateString.format("ll");
if(formatted == "Invalid date")
return alarm_date.toString().substring(0,4);
return formatted;
}
/**
* make sure a name exists
* @param name name of the fire
* @return name of the fire or "UNNAMED"
*/
function getName(name) {
if(name.length == 1)
return "UNNAMED";
return name;
}
/**
* UTF GRID INTERACTIVITY IMPLEMENTATION
* Hover popup fxn for binding event to gridlayer
* @param e the centroid in question
*/
function hoverPop(e) {
//check if data exists at the point
if (!e.data)
return;
//runs if data is found
//console.log(e.data.alarm_date);
var popup = L.popup()
.setLatLng(e.latLng)
.setContent(
'<p><b>Fire Name: </b> ' +getName(e.data.fire_name) +
'<br/><b>Agency: </b> ' + e.data.agency+
'<br/><b>Alarm Date: </b> ' + getDate(e.data.alarm_date)+
'<br/><b>Cause: </b> ' + e.data.cause+
'<br/><b>Area Burned: </b>' + e.data.gis_acres.toFixed(3) + ' acres</p>')
.openOn(map);
}
//overlay JSON
var overlays = {
'Before 1970': L.layerGroup([
L.mapbox.tileLayer('slugis.70d73693'),
L.mapbox.gridLayer('slugis.70d73693').on('click', hoverPop)
]),
'1970-1979': L.layerGroup([
L.mapbox.tileLayer('slugis.022be4ee'),
L.mapbox.gridLayer('slugis.022be4ee').on('click', hoverPop)
]),
'1980-1989': L.layerGroup([
L.mapbox.tileLayer('slugis.f1f7d8fe'),
L.mapbox.gridLayer('slugis.f1f7d8fe').on('click', hoverPop)
]),
'1990-1999': L.layerGroup([
L.mapbox.tileLayer('slugis.4cebb459'),
L.mapbox.gridLayer('slugis.4cebb459').on('click', hoverPop)
]),
'After 2000': L.layerGroup([
L.mapbox.tileLayer('slugis.99cce936'),
L.mapbox.gridLayer('slugis.99cce936').on('click', hoverPop)
])
};
//default: all layers ON
for (var label in overlays) {
overlays[label].addTo(map);
}
//leaflet tilelayer instantiation control {baselayers, overlays}
L.control.layers({
'Textured Map': L.mapbox.tileLayer('slugis.25db57b7').addTo(map),
'Plain White': L.mapbox.tileLayer('mapbox.light')
}, overlays).addTo(map);
</script>
<div class="footer">Data courtesy of FRAP : <a href= "http://frap.fire.ca.gov/data/frapgisdata-sw-fireperimeters_download.php">source</a></div>
</body>
</html>