Web
The regions in the browser: a web map, region lookup, and DuckDB-Wasm
The published files can be used directly by web apps: the site serves them with cross-origin access allowed, and supports HTTP range requests (used by GeoParquet and FlatGeobuf readers). Everything on this page runs in your browser.
Web map
A MapLibre GL JS map of measo_regions06_ll.geojson, with the regions’ colours. Click a region.
The Mercator map keeps parallels and meridians straight, so the boundaries are drawn as they are defined (see Definition).
The essentials for your own page:
const url = "https://australianantarcticdivision.github.io/measoshapes/data/v06/measo_regions06_ll.geojson";
map.on("load", () => {
map.addSource("measo", {type: "geojson", data: url});
map.addLayer({id: "measo", type: "fill", source: "measo",
paint: {"fill-color": ["coalesce", ["get", "fill"], "rgba(0,0,0,0)"]}});
});Region lookup
Which region is a location in? This is a few lines of plain JavaScript: a point-in-polygon test in longitude/latitude, matching the regions’ definition.
→
// is point [x, y] inside ring (array of [x, y])? planar ray casting
function inRing([x, y], ring) {
let inside = false;
for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
const [xi, yi] = ring[i], [xj, yj] = ring[j];
if ((yi > y) !== (yj > y) && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
}
return inside;
}
const inPolygon = (p, rings) => inRing(p, rings[0]) && !rings.slice(1).some(h => inRing(p, h));
const contains = (geom, p) =>
(geom.type === "Polygon" ? [geom.coordinates] : geom.coordinates).some(rings => inPolygon(p, rings));
const hit = regions.features.find(f => contains(f.geometry, [lon, lat]));DuckDB-Wasm
DuckDB-Wasm queries the GeoParquet file in the browser, reading it from the URL.
The SQL on the DuckDB page, including spatial queries, can be run in the DuckDB shell in your browser.
All the code for this page is in site/web-demo.js.