mapbox-gl-draw-split-line-mode

A custom mode for MapboxGL-Draw to split line

Check mapbox-gl-draw-split-polygon-mode For splitting polygons. Check mapbox-gl-draw-cut-polygon-mode For cut polygons.

DEMO

Install

npm install mapbox-gl-draw-split-line-mode mapbox-gl-draw-passing-mode

or use CDN:

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

Usage

import mapboxGl from "mapbox-gl";
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import SplitLineMode from "mapbox-gl-draw-split-line-mode";
import mapboxGlDrawPassingMode from "mapbox-gl-draw-passing-mode";

const map = new mapboxgl.Map({
  container: "map", // container id
  style: "mapbox://styles/mapbox/streets-v11",
  center: [-91.874, 42.76], // starting position
  zoom: 12, // starting zoom
});

const draw = new MapboxDraw({
  userProperties: true,
  displayControlsDefault: false,
  modes: Object.assign(MapboxDraw.modes, {
    splitLineMode: SplitLineMode,
    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,
    ),
  }),
});
map.addControl(draw);

// when mode drawing should be activated
draw.changeMode("splitLineMode", { spliter: mode }); //mode can be point,line_string or polygon

Example

License

MIT © ReyhaneMasumi