Maplibre Terra Draw plugin

This section will learn a maplibre plugin for easy integration with Terra Draw.

maplibre-gl-terradraw

Through this workshop tutorials of Maplibre and Leaflet, now you have understood how Terra Draw works across different mapping libraries.

However, you still need to write quite a lot of codes to bring Terra Draw to your map application.

maplibre-gl-terradraw is developed for easy integration with maplibre.

Installation

Install the library like so.

pnpm add --save-dev @watergis/maplibre-gl-terradraw

Usage

Just add the four line of codes to your maplibre application

import { MaplibreTerradrawControl } from '@watergis/maplibre-gl-terradraw'
import '@watergis/maplibre-gl-terradraw/dist/maplibre-gl-terradraw.css'

const draw = new MaplibreTerradrawControl();
map.addControl(draw, 'top-left');

Supported Terra Draw modes

All Terra Draw modes are supported, and additional functionalities (delete, download buttons).

Available controls

There are following three controls available in the plugin.

All Terra Draw APIs are accessible

Through the plugin, all Terra Draw APIs are accessible via the plugin contructor and getTerra DrawInstance method.

const drawControl = new MaplibreTerradrawControl({
    modes: ['polygon', 'select', 'delete'], // choose what buttons are needed
    open: true, // set default state either expanded or collapsed
    modeOptions: // You can pass your own Terra Draw mode options to the plugin to override default setting
    adapterOptions: // You can pass your own adapter setting to the plugin
});

// You can get Terra Draw instance from the plugin to do whatever you want
const draw = drawControl.getTerraDrawInstance()
// do something

Demo

Open https://terradraw.water-gis.com/ for the demo of maplibre-gl-terradraw

13 examples are avalable how to configure Terra Draw and the plugin.

Source code

GitHub repository is at watergis/maplibre-gl-terradraw.