-
Notifications
You must be signed in to change notification settings - Fork 0
/
heatmap1.html
129 lines (109 loc) · 4.56 KB
/
heatmap1.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
<!DOCTYPE html>
<html lang="en">
<!-- Example code from http://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bournemouth Bus Stop Coverage Heatmap</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script type="text/javascript" src="js/heatmap.min.js"></script>
<script type="text/javascript" src="js/leaflet-heatmap.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bournemouth Bus Stop Coverage Heatmap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="heatmap1.html">Aerial distance</a></li>
<li><a href="heatmap2.html">Walking distance</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="heatmap" id="map-canvas" style="width: 100%; height: 500px"></div>
<div class="panel panel-default">
<div class="panel-heading">Powered by</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4 text-center"><a href="http://openstreetmap.org"><img src="img/osm.png" alt="OpenStreetMap" /></a></div>
<div class="col-md-4 text-center"><a href="http://leafletjs.com"><img src="img/leaflet.png" alt="Leaflet" /></a></div>
<div class="col-md-4 text-center"><a href="http://bournemouthdata.io/"><img src="img/bournemouthdata.png" alt="Bournemouth Data" /></a></div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
window.onload = function(){
var data = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "data/bournemouth_filtered.json",
'dataType': "json",
'success': function (data) {
json = data;
},
'error': function(e){
console.log(e);
}
});
return json;
})();
if(data==null){
alert("Data cannot be loaded!");
}
var baseLayer = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}
);
var cfg = {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
"radius": 20,
"maxOpacity": .8,
// scales the radius based on map zoom
"scaleRadius": false,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
// (there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": false,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
valueField: 'count'
};
var heatmapLayer = new HeatmapOverlay(cfg);
var map = new L.Map('map-canvas', {
center: new L.LatLng(50.7273249, -1.8576807),
zoom: 12,
layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(data);
};
</script>
</body>
</html>