@map.ir/mapbox-gl-draw-geospatial-tools NPM

Mapbox GL Draw Geospatial Tools

Advanced tools for geospatial edit and analysis based on MapboxGL-Draw.

Internally multiple Mapbox GL Draw plugins are used:

DEMO

An Image showing toolbar

Install

npm install @map.ir/mapbox-gl-draw-geospatial-tools

or use CDN:

<script src="https://unpkg.com/@map.ir/mapbox-gl-draw-geospatial-tools"></script>

Usage

geospatial-tools provides MapboxDrawPro class, a wrapper for Mapbox Draw so you can use it just like you would use Mapbox Draw.

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
See API.md for complete reference.

also, you can customize options of internally used plugins which are as below in default:

{
    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,
}