Draw Control

Enable interactive shape drawing with point, line, polygon, rectangle, and circle modes.

Quick Start

Draw tools are built into MapControls. Enable them with showDraw and handle draw lifecycle events with onDraw.

The callback runs for draw.create, draw.update, and draw.delete.

Supported Modes

The Draw control group exposes mode buttons that switch Mapbox Draw modes internally.

  • draw_point: place a draggable point.
  • draw_polygon: draw a free polygon.
  • draw_rectangle: draw an axis-aligned rectangle.
  • draw_circle: draw a circle from center/radius.
  • draw_line_string: draw a polyline.
  • Delete button: removes currently selected features only.

Draw Events

onDraw receives a Mapbox Draw event payload, so you can inspect event type and changed features.

Handle draw events by event.type instead of assuming every payload is a creation. Updates and deletions are also emitted through the same callback.

Underlying Library

The draw capabilities on this page are implemented on top of @mapbox/mapbox-gl-draw.

For advanced behaviors, custom modes, and full API details, refer to mapbox/mapbox-gl-draw.

MapControls Draw Props

These props are the core API for enabling draw mode and handling draw state.

PropTypeDefaultDescription
showDrawbooleanfalseShow draw controls (point, polygon, rectangle, circle, line, delete).
onDraw(e: MapboxDraw.DrawEvent & { features: GeoJSON.Feature[] }) => void—Fires on draw.create, draw.update, and draw.delete. Includes changed features in e.features.
featuresGeoJSON.Feature[][]Initial features loaded into the draw store when the control mounts.

Complete Example

This example keeps the canvas clean: draw controls are enabled and the map directly shows the shapes you create.

Practical Notes

  • Deleting requires selecting one or more features first, then pressing the delete button.
  • Cursor behavior changes by mode: draw modes use crosshair; selected features switch to move cursor.
  • Draw data from the event is useful for quick sync. For persistent app state, normalize and store features in your own model layer.
ControlsMarkers