selectedLights = ({
type: "FeatureCollection",
features: await db.exec(IntersectQuery).get.objs
})
{
if (mapReady && selectedLights) {
map.getSource("lights-halos").setData(selectedLights);
}
}
map.on("load", async () => {
// source for all lights
map.addSource("lights", {
type: "geojson",
data: { type: "FeatureCollection", features: [] }
});
// source for light halos
map.addSource("lights-halos", {
type: "geojson",
data: { type: "FeatureCollection", features: [] }
});
// blur buffer for light halos
map.addLayer({
id: "lights-blur",
type: "circle",
source: "lights-halos",
paint: {
"circle-radius": [
"interpolate",
["cubic-bezier", 1, 1, 1, 1],
["zoom"],
8,
4,
22,
30
],
"circle-color": "#fef08a",
"circle-blur": ["interpolate", ["linear"], ["zoom"], 8, 6, 22, 1]
}
});
// small, dark circle for all lights
map.addLayer({
id: "lights",
type: "circle",
source: "lights",
paint: {
"circle-radius": ["interpolate", ["linear"], ["zoom"], 8, 0.25, 22, 3],
"circle-color": "#fef08a",
"circle-opacity": 0.25
}
});
// small, circle for selected lights
map.addLayer({
id: "lights-on",
type: "circle",
source: "lights-halos",
paint: {
"circle-radius": ["interpolate", ["linear"], ["zoom"], 8, 0.25, 22, 3],
"circle-color": "#fef08a"
}
});
mutable mapReady = true;
})
last = ({delay:0})
debounced = {
bufferCenter;
bufferWidth;
setTimeout(() => {
last.delay = 150;
setTimeout(() => (last.delay = 0), last.delay);
}, 0);
}
marker = new mapboxgl.Marker({ draggable: true })
.setLngLat([5.7245, 45.1885])
.addTo(map)
mutable bufferCenter = [5.7245, 45.1885]
marker.on(
"drag",
(d) =>
(mutable bufferCenter = [
Math.round(marker.getLngLat().lng * 100000) / 100000,
Math.round(marker.getLngLat().lat * 100000) / 100000
])
)
lights = {
if (mapReady) {
const _lights = (await db.exec(GeoJSONQuery).get.objs).reduce(
(obj, item) => {
obj.features.push(item);
return obj;
},
{ type: "FeatureCollection", features: [] }
);
map.getSource("lights").setData(_lights);
return _lights;
} else {
return { type: "FeatureCollection", features: [] };
}
}
dbsrc = FileAttachment("lights@1.sqlite").arrayBuffer()
projsrc = FileAttachment("proj.db").arrayBuffer()
db = spl
.mount("proj", [{ name: "proj.db", data: projsrc }])
.db(dbsrc)
.exec("select initspatialmetadata(1)")
spl = SPL.default()
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.
