Skip to content

Draw

Draw and annotate the map — points, lines, polygons, and text — with per-feature styling. Drawings persist into a synthetic "Drawings" layer (so they appear in the layer list) and can be saved to the browser as named sets or exported to GeoJSON. Built on @mapbox/mapbox-gl-draw.

  • id: draw
  • Surfaces: top-bar (the UI is too large for a map-corner pop-out)

Place it

topBarWidgets: [{ widgetName: 'draw' }],

Behavior

  • Four tools: point, line, polygon, text. Click to place points/text; click to add vertices and double-click (or Enter) to finish lines/polygons; Escape cancels.
  • Click a drawing (or its row) to edit its geometry and style — color, width, radius, fill opacity, and text content/size.
  • Drawings persist as a Drawings layer in the layer list, so they toggle and re-color like any other layer (text toggles with its drawing).
  • Saved sets — save the current drawings to localStorage as a named set; rename, reload, or delete sets. Saved sets are namespaced by branding.appId.
  • Export — download the on-map drawings (or a saved set) as GeoJSON.

Configuration — settings.draw

draw: {
  // tools: ['polygon', 'line'],
  // defaultStyle: { width: 2.5, radius: 6, strokeColor: '#ffffff', strokeWidth: 2, fillOpacity: 0.2, fontSize: 20 },
},
Field Type Default Description
tools ('point' \| 'line' \| 'polygon' \| 'text')[] all four Restrict + reorder the available tools. An empty array means "all"
defaultStyle DrawDefaultStyle kit defaults Paint applied to a newly-created drawing (color is palette-seeded; set the geometry paint here)

defaultStyle fields (all optional): width, radius, strokeColor, strokeWidth, fillOpacity, fontSize. Omitted ones keep the kit default (width 2.5, radius 6, white stroke at width 2, fill opacity 0.2, text size 20). The user can still restyle any drawing after creating it.