Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/map-ir/mapbox-gl-draw-geospatial-tools
Advanced tools for geospatial edit and analysis based on Mapbox Gl Draw
https://github.com/map-ir/mapbox-gl-draw-geospatial-tools
mapbox mapbox-gl-draw
Last synced: about 6 hours ago
JSON representation
Advanced tools for geospatial edit and analysis based on Mapbox Gl Draw
- Host: GitHub
- URL: https://github.com/map-ir/mapbox-gl-draw-geospatial-tools
- Owner: map-ir
- License: mit
- Created: 2020-12-02T13:24:07.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-25T13:49:16.000Z (almost 2 years ago)
- Last Synced: 2024-11-01T07:37:52.030Z (7 days ago)
- Topics: mapbox, mapbox-gl-draw
- Language: JavaScript
- Homepage: https://map-ir.github.io/mapbox-gl-draw-geospatial-tools/
- Size: 19.1 MB
- Stars: 26
- Watchers: 2
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@map.ir/mapbox-gl-draw-geospatial-tools)
# Mapbox GL Draw Geospatial Tools
Advanced tools for geospatial edit and analysis based on [MapboxGL-Draw](https://github.com/mapbox/mapbox-gl-draw).
Internally multiple Mapbox GL Draw plugins are used:
- [Split LineString Mode](https://github.com/ReyhaneMasumi/mapbox-gl-draw-split-line-mode)
- [Split Polygon Mode](https://github.com/ReyhaneMasumi/mapbox-gl-draw-split-polygon-mode)
- [Cut Polygon Mode](https://github.com/ReyhaneMasumi/mapbox-gl-draw-cut-polygon-mode)
- [Scale/Rotate Mode](https://github.com/ReyhaneMasumi/mapbox-gl-draw-scale-rotate-mode)
- [Pinning Mode](https://github.com/mhsattarian/mapbox-gl-draw-pinning-mode)
- [Snap Mode](https://github.com/mhsattarian/mapbox-gl-draw-snap-mode)
- [Free Hand Mode](https://github.com/bemky/mapbox-gl-draw-freehand-mode)
- [Rectangle Restrict Area Mode](https://github.com/dqunbp/mapbox-gl-draw-rectangle-restrict-area)
- [Assisted Rectangle Mode](https://github.com/geostarters/mapbox-gl-draw-assisted-rectangle-mode)
- [Circle](https://github.com/smithmicro/mapbox-gl-circle)
- [Aditional Tools](https://github.com/ReyhaneMasumi/mapbox-gl-draw-additional-tools)
## [DEMO](https://map-ir.github.io/mapbox-gl-draw-geospatial-tools/)
[Or, See Example](https://github.com/map-ir/mapbox-gl-draw-geospatial-tools/blob/main/demo/src/App.js)
## Install
```bash
npm install @map.ir/mapbox-gl-draw-geospatial-tools
```
or use CDN:
```html
```
## Usage
**geospatial-tools** provides `MapboxDrawPro` class, a wrapper for `Mapbox Draw` so you can use it just like you would use `Mapbox Draw`.
```js
import mapboxGl from 'mapbox-gl';
import MapboxDrawPro from '@map.ir/mapbox-gl-draw-geospatial-tools';
const map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [-91.874, 42.76], // starting position
zoom: 12, // starting zoom
});
const draw = new MapboxDrawPro(option);
```
> **`MapboxDrawPro` supported all options and methods of [MapboxGL-Draw](https://github.com/mapbox/mapbox-gl-draw)**
>
> See [API.md](https://github.com/mapbox/mapbox-gl-draw/blob/main/docs/API.md) for complete reference.
also, you can customize options of internally used plugins which are as below in default:
```js
{
userProperties: true,
// aditional-tools
union: true,
copy: true,
buffer: true,
bufferSize: 0.5,
bufferUnit: 'kilometers',
bufferSteps: 64,
length: true,
lengthUnit: 'kilometers',
showLength: true,
area: true,
showArea: true,
// snap-mode
snap: true,
snapOptions: {
snapPx: 15,
snapToMidPoints: true,
},
guides: false,
}
```
## License
MIT © [map-ir](LICENSE)