https://github.com/geostarters/mapbox-gl-draw-assisted-rectangle-mode
Custom mode for Mapbox GL Draw that adds the functionality to draw assisted rectangles
https://github.com/geostarters/mapbox-gl-draw-assisted-rectangle-mode
mapbox-gl-draw mapbox-gl-js vector-tiles
Last synced: 5 months ago
JSON representation
Custom mode for Mapbox GL Draw that adds the functionality to draw assisted rectangles
- Host: GitHub
- URL: https://github.com/geostarters/mapbox-gl-draw-assisted-rectangle-mode
- Owner: geostarters
- Created: 2019-03-20T11:09:18.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-06-06T06:10:19.000Z (about 2 years ago)
- Last Synced: 2025-10-05T12:06:24.541Z (8 months ago)
- Topics: mapbox-gl-draw, mapbox-gl-js, vector-tiles
- Language: JavaScript
- Homepage: https://geostarters.github.io/mapbox-gl-draw-assisted-rectangle-mode/index.html
- Size: 6.54 MB
- Stars: 20
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Mapbox GL Draw Rectangle Assisted Mode
[](https://badge.fury.io/js/%40geostarters%2Fmapbox-gl-draw-rectangle-assisted-mode)
This is a custom mode for (Mapbox GL Draw) [https://github.com/mapbox/mapbox-gl-draw] that adds the functionality to draw assisted rectangles.
#### Changelog:
```bash
Version 3.0.4: Change to Mapbox GL js v1.13.0 and fix minor dependencies
Version 3.0.3: Change to Mapbox GL js v1.4.0
Version 3.0.2: Add custom draw rectangle style
Version 3.0.1: Add orientation angle calculation
Version 3.0.0: Draw strict rentangle mode
```
Based on:
https://github.com/thegisdev/mapbox-gl-draw-rectangle-mode
https://github.com/mapbox/mapbox-gl-draw/blob/master/src/modes/draw_polygon.js
### Install
`npm install @geostarters/mapbox-gl-draw-rectangle-assisted-mode`
### Page Demo
https://geostarters.github.io/mapbox-gl-draw-assisted-rectangle-mode/index.html
### Usage
```js
import DrawRectangle from 'mapbox-gl-draw-rectangle-assisted-mode';
mapboxgl.accessToken = '';
const map = new mapboxgl.Map({
container: 'map',
style: 'https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_fosc.json',
center: [2.079575,41.38701],
zoom: 17,
hash: true
});
const modes = MapboxDraw.modes;
modes.draw_assisted_rectangle = DrawAssistedRectangle.default;
const draw = new MapboxDraw({
modes: modes,
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
},
userProperties: true,
styles: STYLES_DRAW
});
map.addControl(draw);
map.on('draw.create', function (feature) {
console.log(feature);
});
```
### Build
`npm build-web` with browsify
`npm build-all` with babel
### License
MIT
### Credits
Developed by @ICGCAT
More Info
>[https://openicgc.github.io/](https://openicgc.github.io/)
>[https://github.com/geostarters](https://github.com/geostarters)
>[http://betaportal.icgc.cat/](http://betaportal.icgc.cat/)
>[http://www.icgc.cat/en/](http://www.icgc.cat/en/)