A static web application that performs spatial queries and geoprocessing directly in the browser using DuckDB WebAssembly.
This application performs spatial queries of GeoJSON data without requiring server-side processing. All computations run entirely in the browser using web assembly.
- DuckDB WASM: SQL engine
- Leaflet.js: Interactive map visualization
- D3.js: Dynamic table rendering and data visualization
Since this is a static web application that uses ES6 modules, you need to serve it over HTTP:
# Using Python
python -m http.server 8000
# Using Node.js
npx serve .
# Using PHP
php -S localhost:8000
Then open http://localhost:8000 in your browser.
- Set Data Source: Enter a GeoJSON URL in the source field
- Write Queries: Use SQL with
{SOURCE}
placeholder for the data source - Execute: Run spatial analysis queries in real-time
- Visualize: View results in both table and map formats
-- Calculate areas of polygons
WITH datasource AS (SELECT * FROM ST_Read({SOURCE}))
SELECT properties.name,
ST_Area(geom) as area_sq_degrees,
ST_AsGeoJSON(geom) as geometry
FROM datasource
ORDER BY area_sq_degrees DESC
LIMIT 10;
-- Find features within bounding box
WITH datasource AS (SELECT * FROM ST_Read({SOURCE}))
SELECT properties.name, ST_AsGeoJSON(geom) as geometry
FROM datasource
WHERE ST_Within(geom, ST_MakeEnvelope(-123, 48, -121, 49));
-- Calculate centroids
WITH datasource AS (SELECT * FROM ST_Read({SOURCE}))
SELECT properties.name,
ST_AsText(ST_Centroid(geom)) as centroid
FROM datasource;
The application provides access to DuckDB's spatial extension functions:
ST_Read()
- Read spatial data from remote sourcesST_AsGeoJSON()
- Convert geometry to GeoJSONST_Area()
- Calculate area of geometriesST_Centroid()
- Find centroid of geometriesST_Within()
- Spatial containment testingST_MakeEnvelope()
- Create bounding box geometriesST_Distance()
- Calculate spatial distances
- Modern browser with WebAssembly support
- JavaScript ES6 modules support
- CORS-enabled for fetching remote GeoJSON files
The application consists of three main files:
index.html
- Main interface with Bootstrap UIscript.js
- JavaScript module handling DuckDB initialization and spatial operationsstyle.css
- Custom styling for table and map components