Integrate maplibre-gl-terradraw into indoorequal/vue-maplibre-gl #171

New issue

Open

opened 2026-07-24 16:31:49 +00:00 by eliribble · 1 comment

eliribble commented

2026-07-24 16:31:49 +00:00

Owner

I'd like you to look in to what you think it would take to use maplibre-gl-terradraw in our frontend code. I'd like you to create a pull request that adds drawing ability to our UI playground in ts/view/UI.vue. That will allow me to see exactly what it takes and have a chance to play with it.

Currently nidus-sync is using vue-maplibre-gl from indoorequal to add mapping to various browser UI pages. This is working well. We have a requirement through the Nidus Reveal project to allow human reviewers to define the shapes of detected swimming pools. I think it would be easiest if we could leverage [maplibre-gl-terradraw](https://github.com/watergis/maplibre-gl-terradraw) to do so. According to [a vue-maplibre-gl discussion](https://github.com/indoorequal/vue-maplibre-gl/discussions/192) there is not currently support for a draw plugin, but one could be built. I'd like you to look in to what you think it would take to use maplibre-gl-terradraw in our frontend code. I'd like you to create a pull request that adds drawing ability to our UI playground in ts/view/UI.vue. That will allow me to see exactly what it takes and have a chance to play with it.

ned was assigned by eliribble

2026-07-24 16:31:50 +00:00

ned commented

2026-07-24 16:36:52 +00:00

Member

I created PR #172 (#172) with the investigation and playground.

What I found

maplibre-gl-terradraw (v1.15.0 from watergis) implements the standard maplibre-gl IControl interface. It wraps Terra Draw and provides a polished toolbar UI with all the drawing modes you'd need for pool shapes:

polygon, rectangle, circle, freehand (drawing)
select (edit/move existing shapes)
delete-selection, undo, redo, download

Since our existing ts/map/Map.vue is a custom wrapper that works directly with maplibre-gl, the integration is just: map.addControl(new MaplibreTerradrawControl({...})). No special vue-maplibre-gl plugin support needed.

The Playground (/_/ui)

I built a standalone page at /_/ui that demonstrates the full workflow:

Full drawing toolbar (top-right) with polygon, rectangle, circle, freehand, select, undo/redo, delete
Opens expanded by default so you can start drawing immediately
Real-time feature count and event log in a side panel
Export GeoJSON button - converts all drawn features to a FeatureCollection
Clear All button

What it'd take for Nidus Reveal pool shape review

For the actual pool review workflow, you'd need to:

Add MaplibreTerradrawControl to the pool review component with modes focused on pool shapes
Listen for TerraDraw finish events to capture completed polygons
After a shape is finalized, call getSnapshot() to get the GeoJSON features
Persist the geometry by storing the GeoJSON in the existing pool review data model

For a production implementation, you might want to:

Limit to polygon/rectangle/circle/select/delete-selection/undo/redo modes only
Set open: true to keep the toolbar always visible
Wire the finish event to update the pool record in the review store
Consider adding terrain/elevation context if pools need contour-aware placement

I created PR #172 (https://source.gleipnir.technology/Gleipnir/nidus-sync/pulls/172) with the investigation and playground. ## What I found **maplibre-gl-terradraw** (v1.15.0 from watergis) implements the standard maplibre-gl IControl interface. It wraps [Terra Draw](https://github.com/JamesLMilner/terra-draw) and provides a polished toolbar UI with all the drawing modes you'd need for pool shapes: - polygon, rectangle, circle, freehand (drawing) - select (edit/move existing shapes) - delete-selection, undo, redo, download Since our existing ts/map/Map.vue is a custom wrapper that works directly with maplibre-gl, the integration is just: map.addControl(new MaplibreTerradrawControl({...})). No special vue-maplibre-gl plugin support needed. ## The Playground (/_/ui) I built a standalone page at /_/ui that demonstrates the full workflow: 1. Full drawing toolbar (top-right) with polygon, rectangle, circle, freehand, select, undo/redo, delete 2. Opens expanded by default so you can start drawing immediately 3. Real-time feature count and event log in a side panel 4. Export GeoJSON button - converts all drawn features to a FeatureCollection 5. Clear All button ## What it'd take for Nidus Reveal pool shape review For the actual pool review workflow, you'd need to: 1. Add MaplibreTerradrawControl to the pool review component with modes focused on pool shapes 2. Listen for TerraDraw finish events to capture completed polygons 3. After a shape is finalized, call getSnapshot() to get the GeoJSON features 4. Persist the geometry by storing the GeoJSON in the existing pool review data model For a production implementation, you might want to: - Limit to polygon/rectangle/circle/select/delete-selection/undo/redo modes only - Set open: true to keep the toolbar always visible - Wire the finish event to update the pool record in the review store - Consider adding terrain/elevation context if pools need contour-aware placement