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

Install

Getting start with installing the package

Usage

Copy and paste the below code.

API Documentation

See Plugin API documentation

Examples

Adding default GeoJSON feature to TerraDraw

geojson

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.

Jin Igarashi
Adding GeoJSON feature to TerraDraw custom style

geojson

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.

Jin Igarashi
Customising drawing options

custom

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.

Jin Igarashi
Customising drawing style

style

Customising drawing style

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

Jin Igarashi
Measure distance and length of feature

measure

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.

Jin Igarashi
Programmatic Mode Control with Button Synchronization

custom

Programmatic Mode Control with Button Synchronization

Demonstrates how to control Terra Draw modes programmatically while keeping button states synchronized. External buttons can activate drawing modes and the plugin buttons will reflect the current state automatically.

Jin Igarashi
Query elevation directly from TerrainRGB

terrain

Query elevation directly from TerrainRGB

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

Jin Igarashi
Query elevation from Maplibre Terrain

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.

Jin Igarashi
Subscribe select event of TerraDraw

custom

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.

Jin Igarashi
Use different coordinate precisiion

format

Use different coordinate precisiion

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

Jin Igarashi
Using both standard and measure control

custom

Using both standard and measure control

This example shows how you can use both standard MaplibreTerradrawControl and MaplibreMeasureControl on the same map together.

Jin Igarashi
Using custom font for measure control

measure

Using custom font for measure control

This example shows how you can change font glyphs used in MaplibreMeasureControl other than using maplibre's default font setting.

Jin Igarashi
Using custom icon

style

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.

Jin Igarashi