Awesome

maplibre-gl-measures

A MapLibre GL JS plugin for taking length measures with lines and area measures with polygons.

It's working with MapLibre GL JS inspired by the great work done by mapbox/mapbox-gl-draw

Demo

You can rush to the demo here.

Getting started

To use this plugin you need to run:

npm install --save maplibre-gl-measures

and then, in your code use it as follows:

// Import it into your code
import MeasuresControl from 'maplibre-gl-measures';

// your map logic here...

// add the plugin
map.addControl(new MeasuresControl({ /** see options below for further tunning */}), "top-left");

Options

You can control the appearance, units by using the following:

options = {
            lang: {
                areaMeasurementButtonTitle: 'Measure area',
                lengthMeasurementButtonTitle: 'Measure length',
                clearMeasurementsButtonTitle:  'Clear measurements',
            },
            units: 'imperial', //or metric, the default
            unitsGroupingSeparator: ' ', // optional. use a space instead of ',' for separating thousands (3 digits group). Do not send this to use the browser default
            style: {
                text: {
                    radialOffset:  0.9,
                    letterSpacing: 0.05,
                    color: '#D20C0C',
                    haloColor: '#fff',
                    haloWidth: 0,
                    font: 'Klokantech Noto Sans Bold',
                },
                common: {
                    midPointRadius: 3,
                    midPointColor: '#D20C0C',
                    midPointHaloRadius: 5,
                    midPointHaloColor: '#FFF',
                },
                areaMeasurement: {
                    fillColor: '#D20C0C',
                    fillOutlineColor: '#D20C0C',
                    fillOpacity: 0.01,
                    lineWidth: 2,
                },
                lengthMeasurement: {
                    lineWidth: 2,
                    lineColor: "#D20C0C",
                },
            }
        };

map.addControl(new MeasuresControl(options));

Optional drawing event callbacks can be added to the options. The features drawn will be passed to the callback. Use optional callbacks like:

// Handle onRender
function featureRenderCallback(feature) {            
    console.log("Feature rendered:", feature);
}

// Handle onCreate
function featureCreateCallback(feature) {            
    console.log("Feature created:", feature);
}

options.onRender = featureRenderCallback;
options.onCreate = featureCreateCallback;

Supported Versions

MapLibre GL JS 2.4 and later versions should be supported. Earlier versions probably won't work (not even tested anymore).

Contributing

Any contributions to this project are more than welcome. Feel free to reach us and we will gladly include any improvements or ideas that you may have. Please, fork this repository, make any changes and submit a Pull Request and we will get in touch!

Contributors

<a href="http://jdsantos.github.io" target="_blank">Jorge Santos</a>
<a href="https://github.com/jdsantos" target="_blank">github.com/jdsantos</a>

Support

The easiest way to seek support is by submiting an issue on this repo.