29:null 2a:["$","title",null,{"children":"Using GEOS-WASM with GeoJSON | Christoph Pahmeyer | Observable"}] 2f:T1a32,function geojsonToGeosGeom(geojson) { // assume only 2d (x, y) geometries switch (geojson.type) { case "Feature": return geojsonToGeosGeom(geojson.geometry); case "FeatureCollection": if (geojson.features.length === 0) { return geos.GEOSGeom_createEmptyCollection(7); // geos.GEOS_GEOMETRYCOLLECTION } else { const geoms = []; // iterate over each feature geojson.features.forEach((feature) => { geoms.push(geojsonToGeosGeom(feature.geometry)); }); const geomsPtr = geos.Module._malloc(geoms.length * 4); const geomsArr = new Uint32Array(geoms); geos.Module.HEAPU32.set(geomsArr, geomsPtr / 4); const multiGeomsPtr = geos.GEOSGeom_createCollection( 7, // geos.GEOS_GEOMETRYCOLLECTION geomsPtr, geoms.length ); geos.Module._free(geomsPtr); return multiGeomsPtr; } case "GeometryCollection": if (geojson.geometries.length === 0) { return geos.GEOSGeom_createEmptyCollection(7); // geos.GEOS_GEOMETRYCOLLECTION } else { const geoms = []; // iterate over each feature geojson.geometries.forEach((feature) => { geoms.push(geojsonToGeosGeom(feature)); }); const geomsPtr = geos.Module._malloc(geoms.length * 4); const geomsArr = new Uint32Array(geoms); geos.Module.HEAPU32.set(geomsArr, geomsPtr / 4); const multiGeomsPtr = geos.GEOSGeom_createCollection( 7, // geos.GEOS_GEOMETRYCOLLECTION geomsPtr, geoms.length ); geos.Module._free(geomsPtr); return multiGeomsPtr; } case "Point": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyPoint(); } else { return geos.GEOSGeom_createPointFromXY( geojson.coordinates[0], geojson.coordinates[1] ); } case "LineString": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyLineString(); } else { const seq = geojsonCoordsToGeosCoordSeq(geojson.coordinates); return geos.GEOSGeom_createLineString(seq); } case "Polygon": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyPolygon(); } else { const shellSeq = geojsonCoordsToGeosCoordSeq(geojson.coordinates[0]); const shell = geos.GEOSGeom_createLinearRing(shellSeq); const holes = []; if (geojson.coordinates.length > 1) { for (let i = 1; i < geojson.coordinates.length; i++) { const holeSeq = geojsonCoordsToGeosCoordSeq(geojson.coordinates[i]); holes.push(geos.GEOSGeom_createLinearRing(holeSeq)); } } let holesPtr = null; if (holes.length > 0) { const holesArr = new Uint32Array(holes); holesPtr = geos.Module._malloc(holes.length * 4); geos.Module.HEAPU32.set(holesArr, holesPtr / 4); } const polyPtr = geos.GEOSGeom_createPolygon( shell, holesPtr, holes.length ); if (holes.length > 0) { geos.Module._free(holesPtr); } return polyPtr; } case "MultiPoint": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyCollection(4); // geos.GEOS_MULTIPOINT } else { const points = []; for (let i = 0; i < geojson.coordinates.length; i++) { points.push( geos.GEOSGeom_createPointFromXY( geojson.coordinates[i][0], geojson.coordinates[i][1] ) ); } const pointsPtr = geos.Module._malloc(points.length * 4); const pointsArr = new Uint32Array(points); geos.Module.HEAPU32.set(pointsArr, pointsPtr / 4); const multiPointPtr = geos.GEOSGeom_createCollection( 4, // geos.GEOS_MULTIPOINT pointsPtr, points.length ); geos.Module._free(pointsPtr); return multiPointPtr; } case "MultiLineString": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyCollection(5); // geos.GEOS_MULTILINESTRING } else { const lines = []; for (let i = 0; i < geojson.coordinates.length; i++) { const seq = geojsonCoordsToGeosCoordSeq(geojson.coordinates[i]); lines.push(geos.GEOSGeom_createLineString(seq)); } const linesPtr = geos.Module._malloc(lines.length * 4); const linesArr = new Uint32Array(lines); geos.Module.HEAPU32.set(linesArr, linesPtr / 4); const multiLinePtr = geos.GEOSGeom_createCollection( 5, // geos.GEOS_MULTILINESTRING linesPtr, lines.length ); geos.Module._free(linesPtr); return multiLinePtr; } case "MultiPolygon": if (geojson.coordinates.length === 0) { return geos.GEOSGeom_createEmptyCollection(6); // geos.GEOS_MULTIPOLYGON } else { const polygons = []; for (let i = 0; i < geojson.coordinates.length; i++) { const shellSeq = geojsonCoordsToGeosCoordSeq( geojson.coordinates[i][0] ); const shell = geos.GEOSGeom_createLinearRing(shellSeq); const holes = []; if (geojson.coordinates[i].length > 1) { for (let j = 1; j < geojson.coordinates[i].length; j++) { const holeSeq = geojsonCoordsToGeosCoordSeq( geojson.coordinates[i][j] ); holes.push(geos.GEOSGeom_createLinearRing(holeSeq)); } } let holesPtr = null; if (holes.length > 0) { const holesArr = new Uint32Array(holes); holesPtr = geos.Module._malloc(holes.length * 4); geos.Module.HEAPU32.set(holesArr, holesPtr / 4); } const polyPtr = geos.GEOSGeom_createPolygon( shell, holesPtr, holes.length ); if (holes.length > 0) { geos.Module._free(holesPtr); } polygons.push(polyPtr); } const polygonsPtr = geos.Module._malloc(polygons.length * 4); const polygonsArr = new Uint32Array(polygons); geos.Module.HEAPU32.set(polygonsArr, polygonsPtr / 4); const multiPolyPtr = geos.GEOSGeom_createCollection( 6, // geos.GEOS_MULTIPOLYGON polygonsPtr, polygons.length ); geos.Module._free(polygonsPtr); return multiPolyPtr; } default: return null; } }30:T12b8,function geosGeomToGeojson(geomPtr) { if (!geomPtr) { return null; } const geomType = geos.GEOSGeomTypeId(geomPtr); switch (geomType) { case 0: { // geos.GEOS_POINT const seq = geos.GEOSGeom_getCoordSeq(geomPtr); const coords = []; const sizePtr = geos.Module._malloc(4); geos.GEOSCoordSeq_getSize(seq, sizePtr); const size = geos.Module.getValue(sizePtr, "i32"); geos.Module._free(sizePtr); if (size === 1) { const xPtr = geos.Module._malloc(8); const yPtr = geos.Module._malloc(8); geos.GEOSCoordSeq_getXY(seq, 0, xPtr, yPtr); const x = geos.Module.getValue(xPtr, "double"); const y = geos.Module.getValue(yPtr, "double"); geos.Module._free(xPtr); geos.Module._free(yPtr); coords.push(x, y); } const pointJson = { type: "Point", coordinates: coords }; return pointJson; } case 1: { // geos.GEOS_LINESTRING const seq = geos.GEOSGeom_getCoordSeq(geomPtr); const coords = geosCoordSeqToGeojsonCoords(seq); const lineJson = { type: "LineString", coordinates: coords }; return lineJson; } // case 2: // geos.GEOS_LINEARRING ... should not happen case 3: { // geos.GEOS_POLYGON const coords = []; const shell = geos.GEOSGetExteriorRing(geomPtr); if (shell !== 0) { const shellSeq = geos.GEOSGeom_getCoordSeq(shell); const sizePtr = geos.Module._malloc(4); geos.GEOSCoordSeq_getSize(shellSeq, sizePtr); const size = geos.Module.getValue(sizePtr, "i32"); geos.Module._free(sizePtr); if (size > 0) { coords.push(geosCoordSeqToGeojsonCoords(shellSeq)); const numRings = geos.GEOSGetNumInteriorRings(geomPtr); for (let i = 0; i < numRings; i++) { const hole = geos.GEOSGetInteriorRingN(geomPtr, i); const holeSeq = geos.GEOSGeom_getCoordSeq(hole); coords.push(geosCoordSeqToGeojsonCoords(holeSeq)); } } } const polyJson = { type: "Polygon", coordinates: coords }; return polyJson; } case 4: { // geos.GEOS_MULTIPOINT const coords = []; const numPoints = geos.GEOSGetNumGeometries(geomPtr); for (let i = 0; i < numPoints; i++) { const point = geos.GEOSGetGeometryN(geomPtr, i); const seq = geos.GEOSGeom_getCoordSeq(point); const xPtr = geos.Module._malloc(8); const yPtr = geos.Module._malloc(8); geos.GEOSCoordSeq_getXY(seq, 0, xPtr, yPtr); const x = geos.Module.getValue(xPtr, "double"); const y = geos.Module.getValue(yPtr, "double"); geos.Module._free(xPtr); geos.Module._free(yPtr); coords.push([x, y]); } const multiPointJson = { type: "MultiPoint", coordinates: coords }; return multiPointJson; } case 5: { // geos.GEOS_MULTILINESTRING const coords = []; const numLines = geos.GEOSGetNumGeometries(geomPtr); for (let i = 0; i < numLines; i++) { const line = geos.GEOSGetGeometryN(geomPtr, i); const seq = geos.GEOSGeom_getCoordSeq(line); coords.push(geosCoordSeqToGeojsonCoords(seq)); } const multiLineJson = { type: "MultiLineString", coordinates: coords }; return multiLineJson; } case 6: { // geos.GEOS_MULTIPOLYGON const coords = []; const numPolys = geos.GEOSGetNumGeometries(geomPtr); for (let i = 0; i < numPolys; i++) { const poly = geos.GEOSGetGeometryN(geomPtr, i); const polyCoords = []; const shell = geos.GEOSGetExteriorRing(poly); const shellSeq = geos.GEOSGeom_getCoordSeq(shell); polyCoords.push(geosCoordSeqToGeojsonCoords(shellSeq)); const numRings = geos.GEOSGetNumInteriorRings(poly); for (let j = 0; j < numRings; j++) { const hole = geos.GEOSGetInteriorRingN(poly, j); const holeSeq = geos.GEOSGeom_getCoordSeq(hole); polyCoords.push(geosCoordSeqToGeojsonCoords(holeSeq)); } coords.push(polyCoords); } const multiPolyJson = { type: "MultiPolygon", coordinates: coords }; return multiPolyJson; } case 7: { // geos.GEOS_GEOMETRYCOLLECTION const geoms = []; const numGeoms = geos.GEOSGetNumGeometries(geomPtr); for (let i = 0; i < numGeoms; i++) { const geom = geos.GEOSGetGeometryN(geomPtr, i); geoms.push(geosGeomToGeojson(geom)); } const geomCollJson = { type: "GeometryCollection", geometries: geoms }; return geomCollJson; } default: return null; } }31:[] 2d:{"id":"ee1cc6e674cb51c9","slug":"using-geos-wasm-with-geojson","title":"Using GEOS-WASM with GeoJSON","thumbnail":"3b025963febe069fbbb0988f438f7e554c3806a4d91795b2043b971757a7db97","access_level":"public","create_time":"$D2023-09-12T15:43:38.651Z","update_time":"$D2023-09-19T14:37:27.570Z","view_time":null,"first_public_time":"$D2023-09-12T17:09:12.486Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"d2dc6c8d94d1ea2c","login":"chrispahm","name":"Christoph Pahmeyer","avatar_url":"https://avatars-next.observableusercontent.com/5f4a345410b8a1f574bf0beecf9c7b18c1140fb1c085b289e271718ef4ed0d57","tier":"starter_2024"},"version":238,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e3c99024cde17af0","login":"chrispahm","name":"Christoph Pahmeyer","avatar_url":"https://avatars-next.observableusercontent.com/5f4a345410b8a1f574bf0beecf9c7b18c1140fb1c085b289e271718ef4ed0d57","tier":null}],"members":[{"type":"individual","id":"e3c99024cde17af0","login":"chrispahm","name":"Christoph Pahmeyer","avatar_url":"https://avatars-next.observableusercontent.com/5f4a345410b8a1f574bf0beecf9c7b18c1140fb1c085b289e271718ef4ed0d57","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"6c7ff609de80b6e2","slug":"maps","title":"Geo","owner":{"id":"d2dc6c8d94d1ea2c","login":"chrispahm","name":"Christoph Pahmeyer"}},"type":"notebook","body":{"title":"Using GEOS-WASM with GeoJSON","cells":[{"id":0,"value":"# Using GEOS-WASM with GeoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## A simple example creating a concave hull","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"GEOS took ~**${geosConcaveHullTime}** ms to create the concave hull (including conversions from GeoJSON <-> GEOS geometry), while turf.js took ~**${turfConcaveHullTime}** ms.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"viewof points = Inputs.range([0, 1000], {\n value: 100,\n label: \"Number of points\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"viewof allowHoles = Inputs.toggle({ label: \"Allow holes (GEOS)\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof ratio = Inputs.range([0, 1], {\n label: \"Edge length ratio (GEOS)\",\n step: 0.01,\n value: 0.15\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"Swatches(d3.scaleOrdinal([\"GEOS\", \"turf.js\"], [\"red\", \"blue\"]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"map([randomPoints, turfConcaveHull, geosConcaveHull])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"First, we create a set of random points using turf.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"randomPoints = turf.randomPoint(points, {\n bbox: [-11.339436, 36.773405, 15.159588, 57.183437]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"The randomPoint method from turf.js returns a FeatureCollection of points. A FeatureCollection contains an array of single point features. In order to work with the set of points, GEOS requires the points to be a single feature though, so we need to convert it to a MultiPoint feature first","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"randomMultipoint = randomPoints.features.reduce(\n (multipoint, point) => {\n multipoint.coordinates.push(point.geometry.coordinates);\n return multipoint;\n },\n {\n type: \"MultiPoint\",\n coordinates: []\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"Now that we have our MultiPoint feature, we can create the concave hull using GEOS. Unfortunately, we cannot pass the GeoJSON to GEOS like we would do with turf.js. GEOS-WASM is a little difficult to work with, since it's just exposing the low level C-API of GEOS. However, fellow Observable user **@sanak** created a few helper functions [(`geojsonToGeosGeom`, `geosGeomToGeojson`)](https://github.com/chrispahm/geos-wasm/pull/19/files#diff-cac4f1c4264c530fccd0aa2853b7b3ad57876643b014af0fc317b89274d08185) that we can use to make our lives easier!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"geosConcaveHull = {\n const start = performance.now();\n // create a GEOS geometry from the GeoJSON so that we can apply GEOS functions to it\n const geosGeom = geojsonToGeosGeom(randomMultipoint);\n // create the concave hull with the current settings\n const geosConcaveHull = geos.GEOSConcaveHull(\n geosGeom,\n ratio,\n allowHoles ? 1 : 0\n );\n // convert the GEOS geometry to a GeoJSON geometry again\n const concaveHullGeoJson = geosGeomToGeojson(geosConcaveHull);\n // add style so we can distinguish the GEOS result from turf.js\n const styledFeature = {\n type: \"Feature\",\n geometry: concaveHullGeoJson,\n properties: {\n style: {\n color: \"red\",\n fillOpacity: 0.2\n }\n }\n };\n const end = performance.now();\n mutable geosConcaveHullTime = ~~(end - start);\n return styledFeature;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"As a comparison, we also create the concave hull using turf.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"turfConcaveHull = {\n const start = performance.now();\n // create the concave hull using turf\n const turfConcaveHull = turf.concave(randomPoints);\n const end = performance.now();\n mutable turfConcaveHullTime = ~~(end - start);\n // add style so we can distinguish the turf.js result from GEOS in the map above\n turfConcaveHull.properties.style = {\n color: \"blue\",\n fillOpacity: 0.2\n };\n return turfConcaveHull;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"mutable geosConcaveHullTime = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"mutable turfConcaveHullTime = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"function geojsonCoordsToGeosCoordSeq(coords) {\n if (!coords || coords.length === 0) {\n return null;\n }\n const N = coords.length;\n const dim = 2; // coords[0].length\n const coordArr = new Float64Array(coords.flat());\n const coordPtr = geos.Module._malloc(N * dim * 8);\n geos.Module.HEAPF64.set(coordArr, coordPtr / 8);\n const seqPtr = geos.GEOSCoordSeq_copyFromBuffer(coordPtr, N, false, false);\n geos.Module._free(coordPtr);\n return seqPtr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"function geosCoordSeqToGeojsonCoords(seqPtr) {\n if (!seqPtr) {\n return null;\n }\n const sizePtr = geos.Module._malloc(4);\n geos.GEOSCoordSeq_getSize(seqPtr, sizePtr);\n const size = geos.Module.getValue(sizePtr, \"i32\");\n geos.Module._free(sizePtr);\n if (size === 0) {\n return [];\n }\n const coords = [];\n const coordsPtr = geos.Module._malloc(size * 2 * 8);\n geos.GEOSCoordSeq_copyToBuffer(seqPtr, coordsPtr, false, false);\n const view = new Float64Array(\n geos.Module.HEAPF64.buffer,\n coordsPtr,\n size * 2\n );\n for (let i = 0; i < size * 2; i = i + 2) {\n coords.push([view[i], view[i + 1]]);\n }\n geos.Module._free(coordsPtr);\n return coords;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"geos = {\n const initGeosJs = (\n await import(\"https://cdn.skypack.dev/geos-wasm@1.1.6?min\")\n ).default;\n const geos = await initGeosJs();\n return geos;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"turf = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"import { map } from \"@chrispahm/map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"