A custom mode for MapboxGL Draw to select features with highlighting
npm install mapbox-gl-draw-select-mode
!Release
A custom mode for MapboxGL-Draw to select features that highlights features on hover.
``bash`
npm install mapbox-gl-draw-split-polygon-mode
or use CDN:
`html`
`js
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});``
},
});