forked from HandsOnDataViz/leaflet-map-polygon-hover
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
137 lines (123 loc) · 4.07 KB
/
script.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
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
130
131
132
133
134
135
136
137
// Edit the center point and zoom level
var map = L.map('map', {
center: [41.5, -72.7],
zoom: 9,
scrollWheelZoom: false
});
// Edit links to your GitHub repo and data source credit
map.attributionControl
.setPrefix('View <a href="http://github.com/jackdougherty/leaflet-map-polygon-hover">open-source code on GitHub</a>, created with <a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census</a>');
// Basemap layer
new L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
// Edit to upload GeoJSON data file from your local directory
$.getJSON("ct-towns-density.geojson", function (data) {
geoJsonLayer = L.geoJson(data, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
});
// Edit ranges and colors to match your data; see http://colorbrewer.org
// Any values not listed in the ranges below displays as the last color
function getColor(d) {
return d > 5000 ? '#800026' :
d > 1000 ? '#BD0026' :
d > 500 ? '#E31A1C' :
d > 200 ? '#FC4E2A' :
d > 100 ? '#FD8D3C' :
d > 50 ? '#FEB24C' :
d > 30 ? '#FED976' :
'#FFEDA0';
}
// Edit the getColor property to match data column header in your GeoJson file
function style(feature) {
return {
fillColor: getColor(feature.properties.density2010),
weight: 1,
opacity: 1,
color: 'black',
fillOpacity: 0.7
};
}
// This highlights the layer on hover, also for mobile
function highlightFeature(e) {
resetHighlight(e);
var layer = e.target;
layer.setStyle({
weight: 4,
color: 'black',
fillOpacity: 0.7
});
info.update(layer.feature.properties);
}
// This resets the highlight after hover moves away
function resetHighlight(e) {
geoJsonLayer.setStyle(style);
info.update();
}
// This instructs highlight and reset functions on hover movement
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: highlightFeature
});
}
// Creates an info box on the map
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
// Edit info box text and variables (such as props.density2010) to match those in your GeoJSON data
info.update = function (props) {
this._div.innerHTML = '<h4>Connecticut Town<br />Population density 2010</h4>' + (props ?
'<b>' + props.town + '</b><br />' + props.density2010 + ' people / mi<sup>2</sup>'
: 'Hover over a town');
};
info.addTo(map);
// Edit grades in legend to match the ranges cutoffs inserted above
// In this example, the last grade will appear as 5000+
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 30, 50, 100, 200, 500, 1000, 5000],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '–' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
// Use in info.update if GeoJSON data contains null values, and if so, displays "--"
function checkNull(val) {
if (val != null || val == "NaN") {
return comma(val);
} else {
return "--";
}
}
// Use in info.update if GeoJSON data needs to be displayed as a percentage
function checkThePct(a,b) {
if (a != null && b != null) {
return Math.round(a/b*1000)/10 + "%";
} else {
return "--";
}
}
// Use in info.update if GeoJSON data needs to be displayed with commas (such as 123,456)
function comma(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
return val;
}