mapbox-gl-draw-select-mode

A custom mode for MapboxGL-Draw to select features that highlights features on hover.

Install

npm install mapbox-gl-draw-split-polygon-mode

or use CDN:

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

Usage

import mapboxGl from "mapbox-gl";
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import defaultDrawStyle from "@mapbox/mapbox-gl-draw/src/lib/theme.js";

import SelectFeatureMode, {
  drawStyles as selectFeatureDrawStyles,
} from "mapbox-gl-draw-select-mode";

const map = new mapboxgl.Map({
  container: "map",
  center: [-91.874, 42.76],
  zoom: 12,
});

draw = new MapboxDraw({
  userProperties: true,
  displayControlsDefault: false,
  modes: {
    ...SelectFeatureMode(MapboxDraw.modes),
  },
  styles: [...selectFeatureDrawStyles(defaultDrawStyle)],
  userProperties: true,
  // Config select-mode
  selectHighlightColor: "red",
});

map.addControl(draw);

draw?.changeMode("select_feature", {
  /// you can override the highlight color for this operation:
  selectHighlightColor: "blue",
  onSelect(selectedFeatureID) {
    alert(`Selected Feature ID: ${selectedFeatureID}`);
  },
});