-
Notifications
You must be signed in to change notification settings - Fork 0
/
03_index_addLegend.html
64 lines (32 loc) · 1.62 KB
/
03_index_addLegend.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
<!-- **** #1: ADD THIS SECTION after the Leaflet stylesheet in the <head> **** -->
<!-- External CSS file that controls the legend styles -->
<link rel="stylesheet" href="styles.css"/>
<script>
// **** #2: ADD THIS SECTION after polyStyle() in the <body> ****
// Add legend - modified from https://leafletjs.com/examples/choropleth/
var legend = L.control({position: 'bottomleft'});
legend.onAdd = function (mymap) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [1, 2500, 5000, 7000, 10000, 15000],
labels = [];
div.innerHTML ='<h2>Census by Community 2019</h2>' + '<br>' + '<h4>Number of residents per community</h4>';
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + colourBreaks(grades[i] + 1) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(mymap);
/*
// **** This is an optional section that places a title in the right-hand corner ****
var title = L.control({position: 'topright'});
title.onAdd = function (mymap) {
var div = L.DomUtil.create('div', 'info legend');
div.innerHTML = '<h2>Census by Community 2019</h2>';
return div;
};
title.addTo(mymap)
*/
</script>