Welcome to Maplibre GL Terra Draw
This plugin is to add controls to your Maplibre for drawing powered by Terra Draw library.

Demo
Open DEMO (1.3.2)Choose control type
Default control is MaplibreTerradrawControl. If you want to use measure control, enable to choose MaplibreMeasureControl.
Choose options for demo
Your chosen options are automatically applied at the demo and the below usage code.
By default, all Terra Draw modes will be added to the control. However, you might want to remove some drawing modes from your app.
Choose default open mode
if you want the drawing tool to be always expanded, simplely remove `render` mode from constuctor options, then set `true` to `open` property.
Install
Getting start with installing the package
npm install --save-dev @watergis/maplibre-gl-terradraw
Usage
Copy and paste the below code.
import { Map } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import { MaplibreMeasureControl } from '@watergis/maplibre-gl-terradraw'
import '@watergis/maplibre-gl-terradraw/dist/maplibre-gl-terradraw.css'
const map = new Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [0, 0],
zoom: 1,
});
// As default, all Terra Draw modes are enabled,
// you can disable options if you don't want to use them.
const draw = new MaplibreMeasureControl({
modes: [],
open: undefined,
});
map.addControl(draw, 'top-left');
Usage
<!doctype html>
<html lang="en">
<head>
<title>Draw geometries with terra-draw</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-terradraw@1.3.2/dist/maplibre-gl-terradraw.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-terradraw@1.3.2/dist/maplibre-gl-terradraw.css" />
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [0, 0],
zoom: 1
});
const draw = new MaplibreTerradrawControl.MaplibreMeasureControl({
modes: [],
open: undefined
});
map.addControl(draw, 'top-left');
</script>
</body>
</html>
API Documentation
The plugin API documentation is available here.
Examples










The source code is licensed MIT
The website content is licensed CC BY NC SA 4.0.