Skip to content

Commit 649d7d1

Browse files
authored
Update README.md
1 parent 871e37f commit 649d7d1

File tree

1 file changed

+49
-2
lines changed

1 file changed

+49
-2
lines changed

README.md

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,49 @@
1-
# mapboxgl-draw-rectangle-drag
2-
A Mapbox GL Draw plugin to create a rectangle via click & drag
1+
# Mapbox GL Draw Rectangle Drag
2+
A Mapbox GL Draw plugin to create a rectangle via click & drag.
3+
4+
Based on [`thegisdev/mapbox-gl-draw-rectangle-mode`](https://github.com/thegisdev/mapbox-gl-draw-rectangle-mode) plugin code.
5+
6+
How to install
7+
-----
8+
You can install this plugin either using npm or JSDeliver.
9+
10+
### Using npm
11+
We deliver ESM compatible code through our npm module, so that you can import it in your project and compile it without issues.
12+
```
13+
npm i mapboxgl-draw-rectangle-drag --save
14+
```
15+
The module exports a default binding to the module, so you can import it like:
16+
```
17+
import mapboxGLDrawRectangleDrag from 'mapboxgl-draw-rectangle-drag';
18+
```
19+
20+
### Using JSDeliver
21+
We have a script-compatible version of the plugin as well, ready to be imported in your HTML code using a `<script>` tag.
22+
```
23+
<script src="" />
24+
```
25+
26+
A variable named `mapboxGLDrawRectangleDrag` is defined within the global scope to be included in your Mapbox GL Draw modes.
27+
28+
Add mode to Mapbox GL Draw
29+
----
30+
Once the module/script is imported, you need to include the new mode within Mapbox GL's predefined modes.
31+
32+
To do so, you need to include `modes` property in your Mapbox GL Draw configuration options.
33+
```js
34+
var MapboxGLDraw = new MapboxDraw({
35+
modes: {
36+
...MapboxDraw.modes,
37+
'draw_rectangle_drag': mapboxGLDrawRectangleDrag
38+
}
39+
});
40+
```
41+
42+
How to enable rectangle drag mode
43+
---
44+
To enable the rectangle drag mode, you need to execute [`changeMode`](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#changemodemode-string-options-object-draw) method on your Mapbox GL Draw instance.
45+
```
46+
drawInstance.changeMode('draw_rectangle_drag');
47+
```
48+
49+
Unfortunately, custom modes cannot add custom controls to Mapbox GL Draw plugins. So, if you want to have a custom button to enable the control you need to create one by yourself. You can take some ideas from [this CodePen](https://codepen.io/roblabs/pen/zJjPzX)

0 commit comments

Comments
 (0)