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 (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

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

Usage

Copy and paste the below code.

typescript 
	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');

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.

Adding GeoJSON feature to TerraDraw custom style
Adding GeoJSON feature to TerraDraw custom style

You can add GeoJSON features with custom style 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.

Use different coordinate precisiion
Use different coordinate precisiion

TerraDraw usesd 9 digits as default coordinate precision. You can use different coordinate precision instead.

Using custom icon
Using custom icon

This plugin provides default icons for each TerraDraw mode button. You can change default icon if you would like to use your own.

Query elevation from Maplibre Terrain
Query elevation from Maplibre Terrain

This example shows how you can calculate length of line and query elevation from maplibre raster-dem terrain source.

Query elevation directly from TerrainRGB
Query elevation directly from TerrainRGB

This example shows how you can calculate length of line and query elevation from custom TerrainRGB DEM dataset.

Customising drawing style
Customising drawing style

The plugin use default color styling provided by TerraDraw. This example shows you how to customise drawing style.

The source code is licensed MIT

The website content is licensed CC BY NC SA 4.0.