viewof canadaMap = {
let height = 450;
let container = DOM.element('div', {style: `width:${width}px;height:${height}px;border-radius:4px;`});
yield container;
let map = L.map(container, { maxZoom: 10, minZoom: 3 });
let baseLayer = L.tileLayer(cartoDark,{
attribution: cartoAttr,
opacity: 1
})
.addTo(map);
let popProvince = L.geoJson(json, {
style: stylePop,
onEachFeature: areaClick
})
.bindTooltip(function(d) {
return d.feature.properties.prov_name_en + '<br> Pop change (%): '
+ d.feature.properties.pop_perc + '<br> Pop (thousands): ' + d.feature.properties.pop_thou
})
.addTo(map);
let showSelProv = function(d) {
if (mapSel === d) {
return 1;
}
return 0.5;
}
let selProv = L.geoJson(json, {
style: function(feature) {
return {
fillOpacity: showSelProv(feature.properties.prov_name_en[0]),
color: 0,
}
}
}).addTo(map)
let birthProvince = L.geoJson(json, {
style: birthCols,
onEachFeature: areaClick
})
.bindTooltip(function(d) {return contTooltip(d.feature)})
if (mapShowType == "Place of birth") {
birthProvince.addTo(map);
} else {
popProvince.addTo(map);
}
var legend = L.control({position: 'bottomright'});
legend.onAdd = function(map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = legendGrades(),
labels = ['-2 - -1', '-1 - 0', '1 - 0', '0 - 1', '1 - 2', '2 - 3', '3 - 4', '4 - 5', '5 - 6', '6 - 7', '7 - 8', '8 - 9', '9 - 10', '10+'];
for (var i = 0; i < grades.length; i++) {
if (mapShowType == "Place of birth") {
div.innerHTML +=
'<i style = "background-color:' + getBirthCol(grades[i]) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
} else {
div.innerHTML +=
'<i style = "background-color:' + getPopChangeCol(grades[i]) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
}
return div;
};
legend.addTo(map);
map.on("mousedown", () => (mutable mapSel = null));
map.fitBounds(birthProvince.getBounds());
}