parishes = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container);
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let getColor = (d) => {
return d == 1 ? "#fff5f0"
: d == 2 ? "#fee0d2"
: d == 3 ? "#fcbba1"
: d == 4 ? "#fc9272"
: d == 5 ? "fb6a4a"
: d == 6 ? "#ef3b2c"
: d == 7 ? "#cb181d"
: d == 16 ? "#99000d"
: "#fff";
}
let districts = L.geoJson(parishes1669, {
onEachFeature: onEachFeature,
style: d => {
return {
weight: 1,
color: "#ffffff",
fillOpacity: 0.1,
fillColor: getColor(d.properties.parishPlague),
}
}
}).addTo(map);
map.fitBounds(districts.getBounds());
const info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create("div", "info");
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML =
"<h4>Parish Information</h4>" +
(props
?
"Parish: " +
props.PAR +
"<br/>Printed year: " +
props.printedYear +
"<br/>Plague count: " +
props.parishPlague
: "Hover over a parish");
};
info.addTo(map);
function highlightFeature(e) {
let layer = e.target;
layer.setStyle({
stroke: true,
weight: 2,
color: "#666",
dashArray: "",
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
function resetHighlight(e) {
districts.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
}