maplibregl = {
const L = await require("maplibre-gl@2.2.1");
if (!L._style) {
const href = await require.resolve(
"maplibre-gl@2.2.1/dist/maplibre-gl.css"
);
document.head.appendChild(
(L._style = html`<link href=${href} rel=stylesheet>`)
);
}
return L;
}
url = "https://gis.maine.gov/arcgis/rest/services/acf/Conserved_Lands/MapServer/0/"
info = fetch(url + "?" + new URLSearchParams({ f: "json" })).then((response) =>
response.json()
)
objectIds = fetch(
url +
"query?" +
new URLSearchParams({ where: "1=1", returnIdsOnly: "true", f: "json" })
).then((response) => response.json().then((response) => response.objectIds))
data = {
let responses = [];
const perChunk = Math.min(info.maxRecordCount, 100); // items per chunk. Using a small value here increases the number of requests but reduces the risk of running into 404 errors
for (let i = 0; i < objectIds.length; i += perChunk) {
const chunk = objectIds.slice(i, i + perChunk);
// query definition
const query = {
where: "1=1",
outFields: "*",
f: "geojson",
objectIds: chunk.toString()
};
const fullUrl = url + "query?" + new URLSearchParams(query);
responses.push(fetch(fullUrl).then((response) => response.json()));
}
// return a Promise to ensure that Observable knows the cell is not ready until all responses are loaded
return Promise.all(responses).then((responses) => ({
type: "FeatureCollection",
// combine all feature arrays using an Array reduce
features: responses.reduce(
(acc, curr) => acc.concat(curr.features),
new Array(0)
)
}));
}
container = html`
<div id="container" style="height: ${width / 3}px;">
<div id="loading" class="d-flex align-items-center p-5">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
</div>`
viewof basemap = Inputs.radio(["voyager", "positron", "dark-matter"], {
value: "positron",
label: "Basemap"
})
// MapLibre Heatmap from Lukas with minor tweaks and unused code removed
map = {
const map = new maplibregl.Map({
maplibreLogo: true,
container,
center: [-69, 45.5],
zoom: 6,
style: `https://basemaps.cartocdn.com/gl/${basemap}-gl-style/style.json`,
cooperativeGestures: true
});
invalidation.then(() => map.remove());
map.addControl(new maplibregl.NavigationControl());
map.on("load", function () {
map.addSource("lands", {
type: "geojson",
data: data
});
map.addLayer({
id: "landsfill",
type: "fill",
source: "lands",
paint: {
"fill-color": "green",
"fill-opacity": 0.5,
"fill-outline-color": "white"
}
});
});
return map;
}
viewof search = Inputs.search(data.features.map((d) => d.properties))
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.
