CargoCanvas / Examples / Drawing and editing

Drawing and editing

The Draw tool lays shapes interactively — click to add vertices, click the first/last vertex, double-click or press Enter to finish, Escape cancels; rectangles and circles are dragged out in one gesture. A tooltip follows the pointer with the live length, area or radius. Click any finished shape to edit it with Edit: drag vertices, drag a midpoint to insert one, Alt+click to delete. The Turf.js button shows the GeoJSON bridge: drawn zones go out through toGeoJSON(), get unioned, and come back as a layer.

Draw something — measurements land here.

What to notice

draw.start(shape, options) — shapes are 'polygon', 'polyline', 'rectangle', 'circle' and 'corridor' (a polyline finished as a Corridor with a width in meters). drawstart, drawvertex, drawend and drawcancel fire on the tool and on the map.
Measurements come from GeoUtil: geodesic polygon.area(), polyline.lengthMeters(), and the formatters used by the live tooltip. No projection tricks — the numbers hold at any latitude and zoom.
Edit mutates the layer's geometry in place, so anything reading it live — a Geofence zone, a saved reference — sees the edits. Every change fires an edit event on the tool and the layer, ready for persistence.
The Turf.js round-trip is the whole integration story: layer.toGeoJSON() → any Turf function → new GeoJSON(result). Buffers, voronoi territories, dissolves and isoband rendering all follow the same three lines.