|
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