Package Exports

mapbox-gl-draw-additional-tools
mapbox-gl-draw-additional-tools/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mapbox-gl-draw-additional-tools) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mapbox-gl-draw-additional-tools

Some additional tools for MapboxGL-Draw like Union, Centroid, Polygon to Points, Line to Points, Copy, Cut, Buffer, Length, Area and ...

DEMO

A Gif showing demo usage

Install

npm install mapbox-gl-draw-additional-tools

or use CDN:

<script src="https://unpkg.com/mapbox-gl-draw-additional-tools"></script>

Usage

import mapboxGl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { additionalTools, measurement, addToolStyle } from 'mapbox-gl-draw-additional-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 MapboxDraw({
    modes: {
        ...MapboxDraw.modes,
    },
    styles: addToolStyle, // Style to show length or area on features
    userProperties: true,
    union: true, // Default is true. If set to false, the button does not appear in toolbox
    copy: true, // Default is true. If set to false, the button does not appear in toolbox
    buffer: true, // Default is true. If set to false, the button does not appear in toolbox
    bufferSize: 0.5, // Default is 500
    bufferUnit: 'kilometers', //Default is kilometers. It can be miles, degrees or kilometers
    bufferSteps: 64, // Default is 64
    length: true, // Default is true. If set to false, the button does not appear in toolbox
    lengthUnit: 'kilometers', //Default is kilometers. It can be miles, degrees, radians or kilometers
    showLength: true, // Default is true. If set to false, the value does not appear on feature
    area: true, // Default is true. If set to false, the button does not appear in toolbox
    showArea: true, // Default is true. If set to false, the value does not appear on feature
});
map.addControl(draw);
map.addControl(additionalTools(draw), 'top-right');
// or add a class prefix for styling buttons
// e.g. custom-tools-union, custom-tools-buffer, ...
map.addControl(additionalTools(draw, 'custom-tools'), 'top-right');

// You can get length or area value by measurement. See demo!
document.querySelector('.mapbox-gl-draw_length')?.addEventListener('click', () => {
    console.log(measurement.length);
});
document.querySelector('.mapbox-gl-draw_area')?.addEventListener('click', () => {
    console.log(measurement.area);
});

Default style for measurement lable is:

{
    id: 'gl-draw-line-active-length',
    type: 'symbol',
    filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'true'], ['==', 'user_has_length', 'true']],
    layout: {
        'symbol-placement': 'line-center',
        'text-rotation-alignment': 'map',
        'text-pitch-alignment': 'viewport',
        'text-max-angle': 30,
        'text-max-width': 300,
        'text-field': '{user_length} {user_length_unit}',
        'text-font': ['IranSans-Noto'],
        'text-size': ['interpolate', ['linear'], ['zoom'], 8, 8, 10, 12, 16, 16],
        'text-allow-overlap': false,
    },
    paint: {
        'text-opacity': ['interpolate', ['linear'], ['zoom'], 8, 1],
        'text-color': '#000',
        'text-halo-color': ['interpolate', ['linear'], ['zoom'], 2, '#ffffff', 3, '#ffffff'],
        'text-halo-width': 0.3,
        'text-halo-blur': 1,
    },
},
{
    id: 'gl-draw-polygon-active-length',
    type: 'symbol',
    filter: ['all', ['==', '$type', 'Polygon'], ['==', 'active', 'true'], ['==', 'user_has_length', 'true']],
    layout: {
        'symbol-placement': 'line-center',
        'text-rotation-alignment': 'map',
        'text-pitch-alignment': 'viewport',
        'text-max-angle': 30,
        'text-max-width': 300,
        'text-field': '{user_length} {user_length_unit}',
        'text-font': ['IranSans-Noto'],
        'text-size': ['interpolate', ['linear'], ['zoom'], 8, 8, 10, 12, 16, 16],
        'text-allow-overlap': false,
    },
    paint: {
        'text-opacity': ['interpolate', ['linear'], ['zoom'], 8, 1],
        'text-color': '#000',
        'text-halo-color': ['interpolate', ['linear'], ['zoom'], 2, '#ffffff', 3, '#ffffff'],
        'text-halo-width': 0.3,
        'text-halo-blur': 1,
    },
},
{
    id: 'gl-draw-polygon-active-area',
    type: 'symbol',
    filter: ['all', ['==', '$type', 'Polygon'], ['==', 'active', 'true'], ['==', 'user_has_area', 'true']],
    layout: {
        'symbol-placement': 'line',
        'text-rotation-alignment': 'map',
        'text-pitch-alignment': 'viewport',
        'text-max-angle': 30,
        'text-max-width': 300,
        'text-field': '{user_area} meters^2',
        'text-font': ['IranSans-Noto'],
        'text-size': ['interpolate', ['linear'], ['zoom'], 8, 8, 10, 12, 16, 16],
        'text-allow-overlap': false,
    },
    paint: {
        'text-opacity': ['interpolate', ['linear'], ['zoom'], 8, 1],
        'text-color': '#000',
        'text-halo-color': ['interpolate', ['linear'], ['zoom'], 2, '#ffffff', 3, '#ffffff'],
        'text-halo-width': 0.3,
        'text-halo-blur': 1,
    },
}

You can rewrite it as you want!

JSPM