-
Notifications
You must be signed in to change notification settings - Fork 232
/
demo.js
49 lines (43 loc) · 1.66 KB
/
demo.js
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
/**
* Advanced demo
* Fetches a geojson file as well as a data file and joins them before passing to L.choropleth
*/
var map = L.map('map').setView([39.9897471840457, -75.13893127441406], 11)
// Add basemap
L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map)
// Fetch GeoJSON and data to join to it
$.when(
$.getJSON('https://data.phila.gov/resource/bbgf-pidf.geojson'),
$.getJSON('https://data.phila.gov/resource/r24g-zx3n.json?%24select=count(*)%20as%20value%2C%20%3A%40computed_region_bbgf_pidf%20as%20label&%24group=%3A%40computed_region_bbgf_pidf&%24order=value%20desc')
).done(function (responseGeojson, responseData) {
var data = responseData[0]
var geojson = responseGeojson[0]
// Create hash table for easy reference
var dataHash = data.reduce(function (hash, item) {
if (item.label) {
hash[item.label] = isNaN(item.value) ? null : +item.value
}
return hash
}, {})
// Add value from hash table to geojson properties
geojson.features.forEach(function (item) {
item.properties.incidents = dataHash[item.properties._feature_id] || null
})
L.choropleth(geojson, {
valueProperty: 'incidents',
scale: ['white', 'red'],
steps: 5,
mode: 'q',
style: {
color: '#fff',
weight: 2,
fillOpacity: 0.8
},
onEachFeature: function (feature, layer) {
layer.bindPopup('District ' + feature.properties.dist_num + '<br>' + feature.properties.incidents.toLocaleString() + ' incidents')
}
}).addTo(map)
})