cmpPhase3Map = {
const container = DOM.element("div", {
style: `width:${width}px;height:${width}px`
});
yield container; // the DOM element needs to be present for Leaflet to load bits into so we let it go here
const map = L.map(container).setView([44.7, -68.6], 8); // center map on Maine
const osmLayer = L.tileLayer(
"https://stamen-tiles-{s}.a.ssl.fastly.net/" +
`${base}` + // takes queues from the select box
"/{z}/{x}/{y}{r}.{ext}",
{
// this is required by Stamen/OSM
attribution:
'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: "abcd",
minZoom: 0,
maxZoom: 20,
ext: "png"
}
).addTo(map);
// leaflet knows GeoJSON
const power = L.geoJson(cmpPhase3, {
weight: 1,
color: "#cb181d"
}).addTo(map);
}
L = require("leaflet@1.2.0")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
