Welcome to Maplibre GL Terra Draw

This plugin is to add controls to your Maplibre for drawing powered by Terra Draw library.
Overview of Plugin

Demo

Open DEMO (0.7.3)

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.

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

terminal 
npm install --save-dev @watergis/maplibre-gl-terradraw

Usage

Copy and past the below code.

typescript 
	import { Map } from 'maplibre-gl';
	import 'maplibre-gl/dist/maplibre-gl.css';
	import { MaplibreTerradrawControl } 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 MaplibreTerradrawControl({
	    modes: [],
	    open: true,
	});
	map.addControl(draw, 'top-left');

API Documentation

The plugin API documentation is available here.

Examples

Measure distance and length of feature
Measure distance and length of feature

This example shows how you can calculate length of line and area of polygon by using MaplibreMeasureControl when you input a line or a polygon.

Adding default GeoJSON feature to TerraDraw
Adding default GeoJSON feature to TerraDraw

You can add GeoJSON features by using addFeatures() function in the TerraDraw instance which can be retrieved through getTerraDrawInstance() function.

Subscribe select event of TerraDraw
Subscribe select event of TerraDraw

This plugin provides a function getTerraDrawInstance to fetch the instance of TerraDraw itself. Using this instance, you can use all APIs supported by TerraDaraw. For example, the below code is to subscribe TerraDraw's select event to show selected feature as GeoJSON string.

Customising drawing options
Customising drawing options

This plugin tries to optimise the better drawing options for each Terra Draw mode. However, preconfigured drawing options might not be desired for your app. For example, if you only want to use polygon control,but you don't want users to drag a polygon or adding/deleting a node on an edge of a polygon, the following setting can be done.

The source code is licensed MIT

The website content is licensed CC BY NC SA 4.0.

©2025 JinIgarashi