Restricting tools

Control exactly what users can draw and do.

Sometimes you want users to draw only polygons. Sometimes you want a read-only viewer. Sometimes you want to cap the number of features at ten. Here's how to shape the editor surface to match your use case.

Restricting which drawing tools appear

Pass a tools array to limit the available drawing tools. Only tools in the array will appear in the toolbar, and keyboard shortcuts for excluded tools are suppressed automatically.

// Show only the area, line and point tools
<ElementEditorControls
  tools={['polygon', 'line', 'point']}
  onChange={handleChange}
/>

The full set of toolbar items the editor can render:

type DrawTool =
  | 'polygon'    // the Area tool
  | 'rectangle'
  | 'circle'
  | 'line'
  | 'point'
  | 'freehand'
  | 'route'
  | 'picker'    // import an existing shape from OpenStreetMap
  | 'measure'   // distance / area measurement
  | 'search'    // place-search input (geocoder)

picker, measure, and search aren't drawing tools per se — they're toolbar features. They live in the same union because they share the same toolbar gating; restricting tools is the one place to control everything that appears in the FloatingToolbar.

Turning a service off in config.network also hides what needs it, on top of tools: routing: false hides route, nominatim: false hides search, and on Leaflet overpass: false hides picker (see Third-party services).

Passing an empty array (tools={[]}) hides all toolbar items. Combined with readonly, this gives you a viewer with no editing surface at all.

<ElementEditor> takes the same list as the tools prop or as config.tools (which also accepts 'all'); the prop wins when both are set. Anything you don't list is hidden, so list picker, measure or search to keep them:

<ElementEditor tools={['polygon', 'point', 'measure', 'search']} />  // hides everything else

The adapters' ElementEditorControls take the same tools list.

Capping the feature count

Use maxFeatures to limit how many features can exist at once. Once the limit is reached, the drawing tool buttons in the toolbar are greyed out and their keyboard shortcuts won't start a tool.

<ElementEditorControls maxFeatures={10} onChange={handleChange} />

The store enforces the limit for every path that adds features, so the count never goes past maxFeatures:

  • Drawing, the OSM picker, search results, duplicate (including Alt-drag) and paste are refused at the limit. Paste is all-or-nothing: if the whole clipboard doesn't fit, nothing is pasted.
  • Break apart and slice are refused when the extra parts would go past the limit. Merge always works, since it never adds to the count.
  • Imports (file, drag and drop, Cmd+O, ref.importGeoJSON, initialData) are truncated to the remaining room and return ImportResult.truncated: true. In merge mode the existing features count toward the limit; in replace mode they don't.
  • Undo and redo are never blocked.

Each refusal emits an error event ("Maximum of 10 features reached — delete some to add more."), shown as a toast unless you handle onEvent. Leave maxFeatures unset for no limit.

Disabling all editing

The readonly prop turns off every way a user can change the data. Features remain visible and selectable — users can click features to see their properties, and selection highlighting still works.

What stays available in readonly:

  • Selecting features (map, layers list, data table rows), zooming to them, and the details panel (fields shown disabled).
  • Showing / hiding features and groups, collapsing groups (view state, not data).
  • Measuring, search (fly to a result, without the Add buttons), copy (Cmd+C), export (Cmd+S, Download), the data table, the GeoJSON inspector (read-only text) and the layout panels.

What is turned off:

  • Drawing tools, the picker, vertex editing, transform, drag-to-move, cut hole / slice / buffer / simplify / smooth, boolean ops, merge / break apart.
  • Deleting, duplicating, pasting, grouping / ungrouping, renaming features, groups or schemas, drag-reordering the layers list.
  • Data table cell edits, paste into cells, row delete and "Add new"; the schema editor (button and shortcut); typing in the GeoJSON inspector.
  • Importing (Cmd+O, dropping a file on the map) and undo / redo (buttons hidden, Cmd+Z / Cmd+Shift+Z ignored): nothing the user could undo was done by them.

The ref API is not restricted: the host app can still change data in readonly (only setTool is refused).

<ElementEditorControls readonly initialData={savedData} />

readonly is a good fit for display contexts where you want users to explore data without being able to change it.

Combining restrictions

For a fully locked viewer with no editing affordances:

<ElementEditorControls
  readonly
  initialData={savedData}
  tools={[]}
/>

The tools={[]} is belt-and-suspenders here — readonly already disables all drawing. But it also removes the toolbar entirely, for a cleaner viewer UI.

For a controlled drawing experience where users can place exactly one point:

<ElementEditorControls
  tools={['point']}
  maxFeatures={1}
  onChange={handleChange}
/>

Once the user places a point, the tool is disabled. They can still move and delete the point; drawing a second one is blocked.

Hiding UI panels and buttons

The config prop exposes granular visibility toggles for every editor panel and button. All default to true.

<ElementEditor
  config={{
    ui: {
      hints: false,           // Remove drawing action hints from the active toolbar
      dataTable: false,       // Hide the data table panel and button
      layerList: false,       // Hide the layers/features list panel
      schemaEditor: false,    // Hide the schema editor button
      geojsonEditor: false,   // Hide the GeoJSON editor button
      settings: false,        // Hide the map settings button
      zoomToAll: false,       // Hide the "fit all features" zoom button
      zoomIndicator: false,   // Hide the zoom level indicator
      locateButton: false,    // Hide the "show my location" button
      keyboardShortcuts: false, // Disable shortcuts and hide the shortcuts button
    },
  }}
/>

For finer control over keyboard shortcuts:

// Keep shortcuts active but hide the shortcuts reference button
config={{ ui: { keyboardShortcuts: { enabled: true, show: false } } }}

These flags can be combined freely with the flat tools, readonly, and maxFeatures props.

What's next