Mapbox-GL Draw Passing Mode

Custom mode for Mapbox GL Draw that adds passing drawing, the ability to draw features but doesn't add them. this can be used whenever there's a need to draw features to manipulate others, e.g., when cutting or splitting features.

Demo

See a full example in the docs folder, or check at the Demo.

Install

npm i mapbox-gl-draw-passing-mode

or use CDN:

<script src="https://unpkg.com/mapbox-gl-draw-passing-mode"></script>

Usage

import mapboxGlDrawPassingMode from "mapbox-gl-draw-passing-mode";
// or global variable mapboxGlDrawPassingMode when using script tag

const draw = new MapboxDraw({
  modes: {
    ...MapboxDraw.modes,
    passing_mode_point: mapboxGlDrawPassingMode(MapboxDraw.modes.draw_point),
    passing_mode_line_string: mapboxGlDrawPassingMode(
      MapboxDraw.modes.draw_line_string
    ),
    passing_mode_polygon: mapboxGlDrawPassingMode(
      MapboxDraw.modes.draw_polygon
    ),
  },
});

// this will fire `draw.passing-create` event on feature draw
draw.changeMode("passing_mode_line_string");
// or pass a callback to handle drawn feature
draw.changeMode("passing_mode_line_string", (feature) => {
  console.log(feature);
});

when activated, these modes act like Mapbox Gl Draw default modes (draw_point, draw_line_string, and draw_polygon), only they don't add the feature to the map, therefore no draw.create event is fired.

To handle drawn features, instead of using draw.create event, you can pass a callback or use the draw.passing-create event (fired after feature is drawn and only if callback is not provided).

Acknowledgement

The inspiration is from the Radius Mode created by @chriswhong and the discussion here.