MapLibre Terra Draw plugin¶

This section introduces a MapLibre plugin for easy integration with Terra Draw.

maplibre-gl-terradraw¶

Through the previous exercises you have now seen how Terra Draw works and how much control it gives you. However, you still need to write quite a lot of code to bring a full drawing UI to your map application.

maplibre-gl-terradraw was developed for easy integration with MapLibre: it wraps Terra Draw in a standard MapLibre control with ready-made buttons.

Installation¶

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

Usage¶

Just add a few lines of code to your MapLibre application:

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

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

Try it in the live editor¶

Add the control with your favourite selection of modes. The plugin supports all Terra Draw modes — including polyline, undo and redo buttons — plus extra buttons like delete and download.

Available controls¶

There are three controls available in the plugin:

All Terra Draw APIs are accessible¶

Through the plugin, all Terra Draw APIs are accessible via the plugin constructor and the getTerraDrawInstance method:

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

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

Demo¶

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

Many examples are available showing how to configure Terra Draw and the plugin.

Source code¶

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

What's Next?¶

Finally, let's see how the very same Terra Draw code works with other mapping libraries.

Continue to Other mapping libraries