chart = {
let container = DOM.element("div", {
style: `height: ${mapHeight}px`
});
yield html`
<link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet">
${container}
<div style="margin: 15px">${legend}</div>
`;
let { lat, lng, zoom } = initalView;
let map = L.map(container, {
center: [lat, lng],
zoom: zoom,
scrollWheelZoom: scrollWheelZoom
});
let osmLayer = L.tileLayer(
"https://api.mapbox.com/styles/v1/bloureiro/ckyt15pwj6l6o15pq62w5l5ri/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiYmxvdXJlaXJvIiwiYSI6ImNtY2tmOHd3ZjAxNzYybXB5bDZsNm9kbWgifQ.AzCV9U9ZnPrtTvp-qo1HDg",
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Mapbox'
}
).addTo(map);
for (const geojson of features) {
const style = (feature) => {
return {
fillColor:
colour(dataMap.get(feature.properties.trase_id)) ||
traseColours.get("lightgrey"),
weight: 0.1,
opacity: 1,
color: "#748f7e",
fillOpacity: 0.7
};
};
let geojsonLayer = L.geoJson(geojson, { style: style })
.bindTooltip((d) => {
const value = dataMap.get(d.feature.properties.trase_id);
return html`
<small>${d.feature.properties.region_type}</small>
<h3>${d.feature.properties.name}</h3>
<h3>${valueTitle}: ${
value ? `${format(value)} ${valueUnits}` : "N/A"
}</h3>
`;
})
.addTo(map);
if (fitToLayerBounds) {
map.fitBounds(geojsonLayer.getBounds());
}
}
}