-
Notifications
You must be signed in to change notification settings - Fork 0
/
mapbox.html
81 lines (71 loc) · 2.74 KB
/
mapbox.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
<html>
<head>
<title>A Leaflet map!</title>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:40px; width:100%; }
#steps { position:absolute; bottom:0px; width:100%; height: 40px; background:#000; }
#steps a {
color:#fff;
display:inline-block;
text-align:center;
box-sizing:border-box;
max-width:10000px !important;
}
path {
transition: fill .4s ease;
-webkit-transition: fill .4s ease;
}
</style>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v1.3.0/turf.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
<!-- <script src='ratdata.js'></script> -->
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// bbox is in SW, NE format
var bbox = [40.21,-2.54,52.69,12.46];
var map = L.mapbox.map('map').setView([41.7035862, 5.1584164], 11);
var grid = turf.hex(bbox, 0.005);
var grid = turf.count(grid, pts, 'pt_count');
var layerGroup = L.layerGroup().addTo(map);
var hex = L.geoJson(grid, {
style: function(feature){
var fillColor,
ptcount = feature.properties.pt_count;
if (ptcount > 20) fillColor = "#006837", fillOpacity = 0.7;
else if (ptcount > 10) fillColor = "#31a354", fillOpacity = 0.7;
else if (ptcount > 6) fillColor = "#78c679", fillOpacity = 0.7;
else if (ptcount > 1) fillColor = "#c2e699", fillOpacity = 0.7;
else if (ptcount > 0) fillColor = "#ffffcc", fillOpacity = 0.7;
else fillColor = "#000000", fillOpacity = 0; // no data
return { color: false, weight: 0.5, fillColor: fillColor, fillOpacity: fillOpacity };
},
onEachFeature: function( feature, layer ){
layer.bindPopup( "<strong>" + feature.properties.pt_count + "</strong>")
}
}).addTo(layerGroup);
L.geoJson(pts, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius: 1,
fillColor: '#fff',
fillOpacity: 0.4,
stroke: false
});
}
}).addTo(layerGroup);
L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
{
attribution: 'Map tiles by <a href="http://cartodb.com/attributions">CartoDB</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL,</a> and <a href="https://data.cityofchicago.org/Service-Requests/311-Service-Requests-Rodent-Baiting/97t6-zrhs?">City of Chicago</a>',
maxZoom: 17,
minZoom: 9
}).addTo(map);
</script>
</body>
</html>