Customising drawing style
The plugin use default color styling provided by TerraDraw. This example shows you how to customise drawing style.
<!doctype html>
<html lang="en">
<head>
<title>Customising drawing style</title>
<meta
property="og:description"
content="The plugin use default color styling provided by TerraDraw. This example shows you how to customise drawing style."
/>
<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>
<script src="https://unpkg.com/terra-draw@1.1.0/dist/terra-draw.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,
maxPitch: 85
});
const drawControl = new MaplibreTerradrawControl.MaplibreTerradrawControl({
modes: ['point', 'linestring', 'polygon', 'delete'],
open: true,
// change drawing style to red
// see this official guide how to customise style.
// https://github.com/JamesLMilner/terra-draw/blob/main/guides/5.STYLING.md
modeOptions: {
point: new terraDraw.TerraDrawPointMode({
styles: {
pointColor: '#FF0000',
pointWidth: 3,
pointOutlineColor: '#FF0000',
pointOutlineWidth: 1
}
}),
linestring: new terraDraw.TerraDrawLineStringMode({
styles: {
lineStringColor: '#FF0000',
lineStringWidth: 2,
closingPointColor: '#FFFFFF',
closingPointWidth: 3,
closingPointOutlineColor: '#FF0000',
closingPointOutlineWidth: 1
}
}),
polygon: new terraDraw.TerraDrawPolygonMode({
styles: {
fillColor: '#F5AEAE',
fillOpacity: 0.7,
outlineColor: '#FF0000',
outlineWidth: 2,
closingPointColor: '#FAFAFA',
closingPointWidth: 3,
closingPointOutlineColor: '#FF0000',
closingPointOutlineWidth: 1
}
}),
}
});
map.addControl(drawControl, 'top-left');
</script>
</body>
</html>