urlscan.io logo urlscan.io
SecurityTrails logo

maplibre-gl-terradraw.pages.dev Open in urlscan Pro
172.66.44.143  Public Scan

Back to summary
URL: https://maplibre-gl-terradraw.pages.dev/
Submission: On December 26 via api from US — Scanned from FI

Form analysis 0 forms found in the DOM

Text Content

Maplibre GL Terra Draw




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

CHOOSE OPTIONS FOR DEMO

Your chosen options are automatically applied at the demo and the below usage
code.

renderpointlinestringpolygonrectanglecirclefreehandangled-rectanglesensorsectorselectdelete-selectiondeletedownload
render ✕
point ✕
linestring ✕
polygon ✕
rectangle ✕
circle ✕
freehand ✕
angled-rectangle ✕
sensor ✕
sector ✕
select ✕
delete-selection ✕
delete ✕
download ✕

By default, all Terra Draw modes will be added to the control. However, you
might want to remove some drawing modes from your app.

Open drawing editor as default

if you want the drawing tool to be always expanded, simplely remove `render`
mode from constuctor options, then set `true` to `open` property.

NPM
CDN


INSTALL

Getting start with installing the package


npm

yarn

pnpm

bun
terminal Copy

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


USAGE

Copy and past the below code.

typescript Copy

	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: ['render','point','linestring','polygon','rectangle','circle','freehand','angled-rectangle','sensor','sector','select','delete-selection','delete','download'],
	    open: true,
	});
	map.addControl(draw, 'top-left');


USAGE

html Copy

	<!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@0.7.0/dist/maplibre-gl-terradraw.umd.js"></script>
			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-terradraw@0.7.0/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.MaplibreTerradrawControl({
					modes: ['render','point','linestring','polygon','rectangle','circle','freehand','angled-rectangle','sensor','sector','select','delete-selection','delete','download'],
					open: true
				});
				map.addControl(draw, 'top-left');
			</script>
		</body>
	</html>


API DOCUMENTATION

The plugin API documentation is available here.


EXAMPLES

Customise drawing options

Change default drawing options to disable some editing functionalities of
polygon mode.
Subscribe select event of TerraDraw

Use TerraDraw API to subscribe an event.
Adding default GeoJSON feature to TerraDraw

Add GeoJSON features to TerraDraw as default by using addFeatures function.
Measure line and polygon with measure control

Measure line and polygon with MeasureControl
Measure distance of line with default control

Measure distance of line feature added by terradraw.
Measure area of polygon with default control

Measure area of polygon feature added by terradraw.

--------------------------------------------------------------------------------

The source code is licensed MIT

The website content is licensed CC BY NC SA 4.0.

©2024 JinIgarashi