[FOSS4G Asia 2023] GEOS runs on web browsers - WebAssembly power for geospatial analysis

GEOS runs on web browsers WebAssembly power for geospatial analysis 2023/11/29(Wed) FOSS4G Asia 2023 Online Talk Ko Nagase @sanak

Self Introduction ● ● ● Georepublic Japan Developer GitHub: @sanak OSGeo: @Sanak ○ ○ ○ ● pgRouting contributor pgRoutingLayer (QGIS Plugin) contributor OSGeoLive Japanese translator, contributor Regular work: ○ ○ Main: Maintaining Redmine base system’s backend side (Ruby/Ruby on Rails/PostGIS) Sub: Maintaining the system’s frontend side (ReactNative/Next.js/TypeScript)

• https://github.com/sanak
• https://wiki.osgeo.org/wiki/User:Sanak

Agenda ● ● ● ● What is GEOS ? What is GEOS-WASM ? GEOS-WASM using library/app Background ○ ○ ● ● ● ● ● 2D geospatial analysis libraries WebAssembly How the project started Characteristics of GEOS-WASM Recent related topics Future possibilities of WebAssembly Acknowledgements

What is GEOS ? ● ● ● ● Website: https://libgeos.org/ C/C++ library for computational geometry Implements OGC Simple Features geometry model and spatial functions Core dependency of PostGIS, QGIS, GDAL, Shapely, etc.

• https://libgeos.org/
• https://en.wikipedia.org/wiki/Simple_Features
• https://postgis.net/
• https://qgis.org/
• https://gdal.org/
• https://shapely.readthedocs.io/en/stable/project.html

What is GEOS-WASM ? (1/2) ● ● ● ● Website: https://chrispahm.github.io/geo s-wasm/ WebAssembly build of the GEOS library which can be used in the browser and Node.js. Exposes the low-level GEOS C-API to JavaScript without any abstractions. Intended to be used as a building block for higher-level libraries and specific use cases.

• https://chrispahm.github.io/geos-wasm/
• https://libgeos.org/

What is GEOS-WASM ? (2/2)
Usage
Installation
●

Node.js
npm install geos-wasm

●

Browser
<script type="module">
import initGeosJs from
'https://cdn.skypack.dev/geos-wasm';
</script>

import initGeosJs from 'geos-wasm'
// initGeosJs returns a promise that resolves to a GEOS object
const geos = await initGeosJs()
// use the GEOS object to call GEOS functions
// Example: get the area of a polygon
// create a WKT reader
const reader = geos.GEOSWKTReader_create()
const wkt = 'POLYGON ((0 0, 1 0, 1 1, 0 1, 0 0))'
// read the WKT string into a GEOS geometry -> returns a pointer
const geomPtr = geos.GEOSWKTReader_read(reader, wkt)
// create a pointer where the area will be written to
const areaPtr = geos.Module._malloc(8)
// calculate the area of the geometry
geos.GEOSArea(geomPtr, areaPtr)
// read the area from the pointer into a JS number
const area = geos.Module.getValue(areaPtr, 'double')
console.log(area) // area = 1
// free the WKT reader, the geometry, and the pointer
geos.GEOSWKTReader_destroy(reader)
geos.GEOSGeom_destroy(geomPtr)
geos.GEOSFree(areaPtr)

• https://cdn.skypack.dev/geos-wasm

GEOS-WASM using library/app (1/2) geotoolbox ● ● ● ● ● GitHub: neocarto/geotoolbox Developed by @neocarto. Demo site: https://observablehq.com/@neoca rtocnrs/hello-geotoolbox Various working examples GEOS-WASM has been used in some functions (Buffer, Clip, Densify and Union) since v2.0

• https://github.com/neocarto/geotoolbox
• https://github.com/neocarto
• https://observablehq.com/@neocartocnrs/hello-geotoolbox

GEOS-WASM using library/app (2/2) GEOS WASM Tester ● ● ● ● ● GitHub: sanak/geos-wasm-tester Developed by me Demo site: https://sanak.github.io/geos-wa sm-tester/ Inspired from JTS Test Builder which works on Desktop environment GEOS-WASM is used as git submodule

• https://github.com/sanak/geos-wasm-tester
• https://sanak.github.io/geos-wasm-tester/
• https://www.eclipse.org/community/eclipse_newsletter/2018/december/jts.php

Background ● ● 2D geospatial analysis libraries WebAssembly

Background - 2D geospatial analysis libraries ● JTS Topology Suite(Java, LGPL=>EPL, 2000~) ○ ○ ● GEOS(C++, LGPL, 2002~) ○ Bindings: Shapely(Python), sf(R), RGeo(Ruby), GeoRust/GEOS(Rust), GeoSwift(Swift), LibGEOS.jl(Julia), node-geos(JavaScript), .etc App/DB: QGIS, PostGIS, SpatiaLite, .etc ○ DB: MySQL(>=5.7) ○ ● ● ● ● Bindings: GEOS(C++), NetTopologySuite(C#), JSTS(JavaScript), dart_jts(Dart) App/Library: OpenJUMP, GeoTools Boost.Geometry(C++, BSL, 2009~) D3.js(JavaScript, BSD, 2011~) Turf.js(JavaScript, MIT, 2013~) GeoRust/Geo(Rust, MIT/Apache, 2015~)

• https://github.com/locationtech/jts
• https://libgeos.org/
• https://github.com/NetTopologySuite/NetTopologySuite
• https://github.com/bjornharrtell/jsts
• https://github.com/moovida/dart_jts
• http://www.openjump.org/
• https://www.geotools.org/
• https://github.com/shapely/shapely
• https://r-spatial.github.io/sf/
• https://rgeo.info/
• https://crates.io/crates/geos
• https://github.com/GEOSwift/GEOSwift
• https://github.com/JuliaGeo/LibGEOS.jl
• https://github.com/kashif/node-geos
• https://github.com/boostorg/geometry
• https://d3js.org/
• https://turfjs.org/
• https://crates.io/crates/geo

Background - WebAssembly (1/3) Summary: MDN, webassembly.org ● ● ● ● ● Low-level assembly-like language Runs on modern web browsers Near-native performance Compiled from C/C++, Rust, etc. Designed to complement and run alongside JavaScript History: Wiki ● ● ● 2015 Jun: First announced 2017 Nov: Supported on all major browsers 2019 Dec: WebAssembly Core Specification (v1) becomes W3C standard

• https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts
• https://webassembly.org/
• https://en.wikipedia.org/wiki/WebAssembly
• https://www.w3.org/TR/wasm-core-1/

Background - WebAssembly (2/3) ● FOSS4G 2019: ○ ● FOSS4G 2021: ○ ○ ● WebAssembly - a new technology and its potential for geospatial application by Pirmin Kalberer (YouTube) OSGeo in the browser: Advances in client-side WebAssembly-based Geospatial Analysis and frontend visualization using jsgeoda and Vis.gl by Dylan Halpern (YouTube) Handling GeoTIFFs in client-side code with GDAL and Loam by Derek Dohler (YouTube) FOSS4G 2022: ○ ○ Write once, run anywhere: safe and reusable analytic modules for WebAssembly, Javascript, or more! by Stuart Lynn WebAssembly4G: Where we are, and where we're heading by Michael Schmuki

• https://blog.sourcepole.ch/assets/2019/wasm-foss4g19.pdf
• https://www.youtube.com/watch?v=WodAYDDSq1g&t=64s
• https://callforpapers.2021.foss4g.org/foss4g2021/talk/VESZRE/
• https://www.youtube.com/watch?v=FnTZrOrQL-s
• https://callforpapers.2021.foss4g.org/foss4g2021/talk/NZYLKZ/
• https://www.youtube.com/watch?v=WYQH7AWViCo
• https://talks.osgeo.org/foss4g-2022/talk/XV87XB/
• https://boardend.github.io/foss4g-2022-webassembly4g/1

Background - WebAssembly (3/3) ● Emscripten (C/C++) ○ ○ ○ ○ ● ddohler/gdal-js (GDAL) azavea/loam (GDAL) bugra9/gdal3.js (GDAL, Demo) jvail/spl.js (SpatiaLite, Demo) Rust ○ dabreegster/route_snapper (Demo) ■ Draw routes in MapLibre snapped to a street network using client-side routing ○ :

• https://github.com/ddohler/gdal-js
• https://github.com/azavea/loam
• https://github.com/bugra9/gdal3.js
• https://gdal3.js.org/
• https://github.com/jvail/spl.js
• https://jvail.github.io/spl.js/examples/topology.html
• https://github.com/dabreegster/route_snapper
• https://dabreegster.github.io/route_snapper/

How the project started (1/6) The project idea itself started from @tmcw’s braindump: https://github.com/tmcw/geos-wasm ● ● ● ● Turf is most comfortable for web development. But for robustness, it needs other stable implementations like JSTS which is port from JTS. Getting the same features/bugs as GEOS is preferable. Raise GEOS/WASM proposal.

• https://github.com/tmcw
• https://github.com/tmcw/geos-wasm

How the project started (2/6) @chrispahm found the repository, then created the POC version with GEOS using Emscripten: geos-wasm Is it worth the effort? · Issue #2 · tmcw/geos-wasm ● ● ● Full working “buffer” demo and very detailed documents. Compiling process is based on bugra9/gdal3.js. Serialization performance issue was mentioned.

• https://github.com/chrispahm
• https://github.com/chrispahm/geos-wasm/tree/8c2679536bd33205377b6359a2e7bdc03d69db14
• https://github.com/tmcw/geos-wasm/issues/2
• https://github.com/bugra9/gdal3.js

How the project started (3/6) @kylebarron wrote his blog: Thoughts on GEOS in WebAssembly ● ● ● ● Similarity with Apache Parquet bindings. Details of WebAssembly performance concept. Details of the serialization performance issue. GeoRust possibility for future ○ ○ geoarrow/geoarrow-rs Prototyping GeoRust + GeoArrow in WebAssembly / Kyle Barron | Observable

• https://github.com/kylebarron
• https://kylebarron.dev/blog/geos-wasm
• https://github.com/geoarrow/geoarrow-rs
• https://observablehq.com/@kylebarron/prototyping-georust-geoarrow-in-webassembly

How the project started (4/6) I found @kylebarron’s blog, and feel excited about the project. ● ● ● Experience of GEOS COM Wrapper for Windows+IE (ActiveX). Demo (require DLL registration) Tried node-geos contribution, but gave up it because Node (v8) C++ API is difficult for me and it only supports Node, and not web browsers. Started contributions to the project from PR #2 and #3.

• https://github.com/kylebarron
• https://kylebarron.dev/blog/geos-wasm
• https://github.com/sanak/geos-com
• https://sanak.github.io/geos-com/geos_com_tester.html
• https://github.com/kashif/node-geos
• https://github.com/chrispahm/geos-wasm/pull/2
• https://github.com/chrispahm/geos-wasm/pull/3

How the project started (5/6) ● ● ● ● Preferred data transfer between JS and WASM context → shouldn't it be WKB? · Issue #4 · chrispahm/geos-wasm Passing Geometries between JavaScript and GEOS-WASM was slow when using text-based format (WKT (Well-Known-Text) and stringified GeoJSON). Using WKB (Well-Known-Binary) format with @syncpoint/wkx package increases performance. (Later, helper methods were added via PR #19.)

• https://github.com/chrispahm/geos-wasm/issues/4
• https://www.npmjs.com/package/@syncpoint/wkx
• https://github.com/chrispahm/geos-wasm/pull/19

How the project started (6/6) ● ● ● ● API preferences? · Issue #5 · chrispahm/geos-wasm Originally, it was designed with mixing high-level function (like “buffer”) which is compatible with Turf.js. Personally, I wanted to have Shapely like API, but releasing allocated memory seems to be difficult in JavaScript Garbage Collection… From the discussion, now it provides only low-level GEOS C-API functions.

• https://github.com/chrispahm/geos-wasm/issues/5

Characteristics of GEOS-WASM ● Unique to compile C/C++ code by Emscripten in bindings of GEOS ○ ○ ○ ○ ○ Unlike other GEOS bindings (Shapely, etc.) which are dynamic links to GEOS C/C++ library. JTS bindings (JSTS, dart_jts, NTS, etc.) port Java code to each language, so GEOS-WASM is a bit similar to those. GEOS patch version up requires full compilation to WebAssembly. License is LGPL 2.1, same as GEOS. Due to full compilation, the npm package size is bigger than Turf.js and similar to JSTS ■ geos-wasm: 2.98 MB ■ jsts: 3.42 MB ■ @turf/turf: 658 kB

• https://www.npmjs.com/package/geos-wasm
• https://www.npmjs.com/package/jsts
• https://www.npmjs.com/package/@turf/turf

Recent related topics ● WebAssembly ○ ○ ● The State of WebAssembly 2023 WebAssembly Garbage Collection (WasmGC) enabled by default in Chrome ■ Related Flutter news: Support for WebAssembly (Wasm) | Flutter WebAssembly in FOSS4G ○ ○ qgis/qgis-js (Demo) ■ QGIS runs on web browsers with Emscripten build SotM EU 2023 workshop: Ungap the Map: designing moonshot cycling networks by Dustin Carlino ● Client side routing with custom cost function (link)

• https://blog.scottlogic.com/2023/10/18/the-state-of-webassembly-2023.html
• https://developer.chrome.com/en/blog/wasmgc/
• https://docs.flutter.dev/platform-integration/web/wasm
• https://github.com/qgis/qgis-js
• https://qgis.github.io/qgis-js/
• https://stateofthemap.eu/program/ungap-the-map-designing-moonshot-cycling-networks
• https://twitter.com/CarlinoDustin/status/1719393159560524040

Future possibilities of WebAssembly ● Shade routing with open 3D building data and client side routing ? ○ ○ ● From Rust existing resources (dabreegster/route_snapper) ? Or pgRouting core C/C++ part can be exported as WebAssembly by Emscripten ? More interoperability across languages ○ “Component Model” which is mentioned in FOSS4G 2022 WebAssembly4G: Where we are, and where we're heading slide’s p.20 and p.37 by Michael Schmuki

• https://github.com/dabreegster/route_snapper
• https://github.com/pgRouting
• https://component-model.bytecodealliance.org/
• https://boardend.github.io/foss4g-2022-webassembly4g/20?clicks=1
• https://boardend.github.io/foss4g-2022-webassembly4g/37?clicks=2

Acknowledgements ● ● ● GEOS-WASM authors and contributors GEOS community And other all projects and persons in this slide

Thank you! ● ● GitHub: @sanak Email: [email protected]

• https://github.com/sanak