Integrate maplibre-gl-terradraw with UI drawing playground

ned commented

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

Member

This PR investigates and demonstrates integrating maplibre-gl-terradraw for drawing shapes (swimming pools, etc.) on the map.

Key finding: maplibre-gl-terradraw implements the standard maplibre-gl IControl interface — add it with map.addControl(). It does not need any special plugin support from vue-maplibre-gl. Integration into the existing custom Map.vue wrapper is straightforward.

Added:

@watergis/maplibre-gl-terradraw v1.15.0 dependency
ts/view/UI.vue — drawing playground at /_/ui
Route registration in ts/route/config.ts

Playground features:

Drawing toolbar: polygon, rectangle, circle, freehand
Select/edit mode for adjusting existing shapes
Undo/redo support
GeoJSON export (drawn features as FeatureCollection)
Feature statistics (count, polygon count)
Event log tracking drawing lifecycle
Clear all functionality

How to test:

Start the sync dev server
Navigate to /_/ui
Use the drawing toolbar (top-right) to draw shapes
Click Export GeoJSON to see the GeoJSON output

Next steps for Nidus Reveal pool shape review:

Add MaplibreTerradrawControl to the pool review component with modes ["polygon", "rectangle", "circle", "select", "delete-selection", "undo", "redo"]
Listen for TerraDraw finish events to capture completed shapes
Use getSnapshot() to get GeoJSON features for persistence

This PR investigates and demonstrates integrating [maplibre-gl-terradraw](https://github.com/watergis/maplibre-gl-terradraw) for drawing shapes (swimming pools, etc.) on the map. **Key finding**: maplibre-gl-terradraw implements the standard maplibre-gl `IControl` interface — add it with `map.addControl()`. It does **not** need any special plugin support from vue-maplibre-gl. Integration into the existing custom `Map.vue` wrapper is straightforward. **Added:** - `@watergis/maplibre-gl-terradraw` v1.15.0 dependency - `ts/view/UI.vue` — drawing playground at `/_/ui` - Route registration in `ts/route/config.ts` **Playground features:** - Drawing toolbar: polygon, rectangle, circle, freehand - Select/edit mode for adjusting existing shapes - Undo/redo support - GeoJSON export (drawn features as FeatureCollection) - Feature statistics (count, polygon count) - Event log tracking drawing lifecycle - Clear all functionality **How to test:** 1. Start the sync dev server 2. Navigate to `/_/ui` 3. Use the drawing toolbar (top-right) to draw shapes 4. Click Export GeoJSON to see the GeoJSON output **Next steps for Nidus Reveal pool shape review:** - Add `MaplibreTerradrawControl` to the pool review component with modes `["polygon", "rectangle", "circle", "select", "delete-selection", "undo", "redo"]` - Listen for TerraDraw `finish` events to capture completed shapes - Use `getSnapshot()` to get GeoJSON features for persistence

ned referenced this pull request

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

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

eliribble commented

2026-07-24 17:07:30 +00:00

Owner

Can you rebase this on the latest main?

ned force-pushed issue-171-terradraw-playground from 294e07aa66

/ golint (push) Failing after 25s

Details

to b928a5a679

/ golint (push) Successful in 20s

Details

/ pnpm-build (push) Successful in 1m1s

Details

2026-07-24 17:08:39 +00:00

Compare

ned commented

2026-07-24 17:08:41 +00:00

Author

Member

Rebased onto latest main. Conflicts in package.json, pnpm-workspace.yaml, ts/route/config.ts, and pnpm-lock.yaml were resolved — kept both the new mitt dependency from main and the terradraw dependency from the branch.

eliribble commented

2026-07-24 17:26:17 +00:00

Owner

Thanks, I got this running, and it looks pretty good. I'd like you to keep your first commit, but add a commit on top. I want that commit to modify your existing example to use the <mgl-map> component. I imagine you'll need to leverage the @map:load event to add your drawing controls.

If you can make it work it will be much easier to integrate into the rest of our existing map-using views.

Thanks, I got this running, and it looks pretty good. I'd like you to keep your first commit, but add a commit on top. I want that commit to modify your existing example to use the `<mgl-map>` component. I imagine you'll need to leverage the `@map:load` event to add your drawing controls. If you can make it work it will be much easier to integrate into the rest of our existing map-using views.

ned added 1 commit

2026-07-24 17:28:06 +00:00

refactor: use vue-maplibre-gl <mgl-map> component for drawing playground

/ golint (push) Successful in 20s

Details

/ pnpm-build (push) Successful in 1m2s

Details

85e745a4f2

Replace the manual maplibre-gl Map construction with vue-maplibre-gl's
<mgl-map> component and the @map:load event pattern that the rest of
the Nidus Reveal codebase uses.

The key change: instead of creating a raw maplibregl.Map in onMounted
and registering TerraDraw controls in a nested map.on('load', ...),
the <mgl-map> component handles map lifecycle and the @map:load event
handler wires up the MaplibreTerradrawControl.

This makes the playground code structurally identical to how drawing
controls will be integrated into the real Pool.vue review component,
making the transition from playground to production straightforward.

ned commented

2026-07-24 17:28:14 +00:00

Author

Member

Updated: added a commit on top that refactors the playground to use <mgl-map> from vue-maplibre-gl instead of raw new maplibregl.Map().

What changed:

Replaced the manual map creation in onMounted + nested map.on("load", ...) with <mgl-map> component and @map:load="onMapLoad" — the same pattern used by Feature.vue, ParcelDetail.vue, and the rest of the codebase
Uses useMap() for map access, MglEvent<"load"> for the load handler, and mapStyleURL() from @/map/util for the style URL
Removed the maplibre-gl/dist/maplibre-gl.css import (vue-maplibre-gl handles that)
Map lifecycle is now managed by the component; only the draw control needs explicit cleanup in onBeforeUnmount

All existing functionality (drawing modes, GeoJSON export, stats, event log, clear) is preserved. The structural change makes the playground an exact template for how drawing controls will be integrated into Pool.vue and other map views.

Updated: added a commit on top that refactors the playground to use `<mgl-map>` from vue-maplibre-gl instead of raw `new maplibregl.Map()`. **What changed:** - Replaced the manual map creation in `onMounted` + nested `map.on("load", ...)` with `<mgl-map>` component and `@map:load="onMapLoad"` — the same pattern used by `Feature.vue`, `ParcelDetail.vue`, and the rest of the codebase - Uses `useMap()` for map access, `MglEvent<"load">` for the load handler, and `mapStyleURL()` from `@/map/util` for the style URL - Removed the `maplibre-gl/dist/maplibre-gl.css` import (vue-maplibre-gl handles that) - Map lifecycle is now managed by the component; only the draw control needs explicit cleanup in `onBeforeUnmount` All existing functionality (drawing modes, GeoJSON export, stats, event log, clear) is preserved. The structural change makes the playground an exact template for how drawing controls will be integrated into Pool.vue and other map views.