BufferQuery = {
return srid === "3857"
? `SELECT ST_Transform(ST_Buffer(ST_Transform(MakePoint(${bufferCenter[0]}, ${bufferCenter[1]},4326),3857), ${bufferWidth}, ${quadSegments}), 4326);`
: `SELECT ST_Buffer(MakePoint(${bufferCenter[0]}, ${bufferCenter[1]},4326), ${bufferWidthDegrees}, ${quadSegments});`;
}
buffer = await db.exec(BufferQuery).get.first
{
if (mapReady) {
map.getSource("buffer").setData(buffer);
}
}
map.on("load", async () => {
// buffer circle
map.addSource("buffer", {
type: "geojson",
data: { type: "FeatureCollection", features: [] }
});
map.addLayer({
id: "buffer",
type: "line",
source: "buffer",
paint: {
"line-color": "#ff0000",
"line-width": 3
}
});
mutable mapReady = true;
})
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 * 1000000) / 1000000,
Math.round(marker.getLngLat().lat * 1000000) / 1000000
])
)
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.
