A Mapbox GL Draw plugin to create a rectangle via click & drag.

Based on thegisdev/mapbox-gl-draw-rectangle-mode plugin code.

Try out this demo to see the plugin's behaviour: https://codepen.io/jesusbotella/pen/zVdxGM

You can install this plugin either using npm or JSDeliver.

We deliver ESM compatible code through our npm module, so that you can import it in your project and compile it without issues.

npm i mapboxgl-draw-rectangle-drag --save

The module exports a default binding to the module, so you can import it like:

import mapboxGLDrawRectangleDrag from 'mapboxgl-draw-rectangle-drag';

We have a script-compatible version of the plugin as well, ready to be imported in your HTML code using a <script> tag.

Use this URL to get the latest version:

<script src="https://cdn.jsdelivr.net/gh/CartoDB/mapboxgl-draw-rectangle-drag/build/mapboxgl-draw-rectangle-drag.browser.js"></script>

Or add your own version number to the URL:

<script src="https://cdn.jsdelivr.net/gh/CartoDB/[email protected]/build/mapboxgl-draw-rectangle-drag.browser.js"></script>

A variable named mapboxGLDrawRectangleDrag is defined within the global scope to be included in your Mapbox GL Draw modes.

You need to follow these steps in order to enable the control in your Draw instance.

Once the module/script is imported, you need to include the new mode within Mapbox GL's predefined modes.

To do so, you need to include modes property in your Mapbox GL Draw configuration options.

var MapboxGLDraw = new MapboxDraw({
  modes: {
    ...MapboxDraw.modes,
    'draw_rectangle_drag': mapboxGLDrawRectangleDrag
  }
});

To enable the rectangle drag mode, you need to execute changeMode method on your Mapbox GL Draw instance.

drawInstance.changeMode('draw_rectangle_drag');

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.

To do so, an event listener is needed. You need to listen to draw.create event on your map instance to get the definition of the feature that has just been created.

map.on('draw.create', function (event) {
  console.log(e.features);
});

You can read more about it in Draw documentation.