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

Custom mode for Mapbox GL Draw to pin shared coordinates together during edit.
https://github.com/mhsattarian/mapbox-gl-draw-pinning-mode

mapbox mapbox-gl-draw mode

Last synced: about 2 months ago
JSON representation

Custom mode for Mapbox GL Draw to pin shared coordinates together during edit.

• Host: GitHub
• URL: https://github.com/mhsattarian/mapbox-gl-draw-pinning-mode
• Owner: mhsattarian
• License: mit
• Created: 2020-11-28T12:32:14.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-11-20T12:14:50.000Z (about 3 years ago)
• Last Synced: 2024-09-23T16:17:51.928Z (3 months ago)
• Topics: mapbox, mapbox-gl-draw, mode
• Language: JavaScript
• Homepage: https://mhsattarian.github.io/mapbox-gl-draw-pinning-mode/
• Size: 2.31 MB
• Stars: 11
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Mapbox-GL Draw Pinning Mode

![npm](https://img.shields.io/npm/v/mapbox-gl-draw-pinning-mode?color=green)

Custom mode for [Mapbox GL Draw](https://github.com/mapbox/mapbox-gl-draw) for pinning shared coordinates together during edit.

## Demo

See a full example in the docs folder, or check at the [**Demo**](https://mhsattarian.github.io/mapbox-gl-draw-pinning-mode).

![a GIF showing usage demo](docs/demo.gif)

## Install

```shell

npm i mapbox-gl-draw-pinning-mode

```

or use CDN:

```html

```

## Usage

```js

import mapboxGlDrawPinningMode from "mapbox-gl-draw-pinning-mode";

// or global variable `mapboxGlDrawPinningMode` when using script tag

const draw = new MapboxDraw({

  modes: {

    ...MapboxDraw.modes,

    pinning_mode: mapboxGlDrawPinningMode,

  },

});

// inherited from, and acting similar to simple_select

draw.changeMode("pinning_mode");

```

This mode inherits `simple_select` mode from the `mapbox-gl-draw`, so the Behavior is quite the same.

## Acknowledgement

this project is inspired from `Pinning` feature of [leaflet-geoman (Pro)](https://geoman.io/blog/pinning-now-in-leaflet-geoman-pro) project.