https://github.com/mhsattarian/mapbox-gl-draw-select-mode

A custom mode for MapboxGL-Draw to select features that highlights features on hover.
https://github.com/mhsattarian/mapbox-gl-draw-select-mode

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mhsattarian/mapbox-gl-draw-select-mode
• Owner: mhsattarian
• License: mit
• Created: 2022-11-18T19:49:57.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-02T10:21:56.000Z (3 months ago)
• Last Synced: 2024-10-31T17:07:39.683Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://mhsattarian.github.io/mapbox-gl-draw-select-mode/
• Size: 964 KB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![NPM](https://img.shields.io/npm/v/mapbox-gl-draw-select-mode.svg)](https://www.npmjs.com/package/mapbox-gl-draw-select-mode)

![Release](https://github.com/mhsattarian/mapbox-gl-draw-select-mode/workflows/Release/badge.svg)

# mapbox-gl-draw-select-mode

A custom mode for [MapboxGL-Draw](https://github.com/mapbox/mapbox-gl-draw) to select features that highlights features on hover.

## Install

```bash

npm install mapbox-gl-draw-select-mode

```

or use CDN:

```html

```

## Usage

```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}`);

  },

});

```