feat: add measure control to map editor (#4951)

* feat: add measure control to map editor

* feat: added MeasureControl to GeoHub map editor and viewer

* fix: delete terradraw layers from saved style

Author: Jin Igarashi

.changeset/sour-melons-exercise.md

@@ -0,0 +1,5 @@
+---
+"geohub": minor
+---
+
+feat: added MeasureControl to GeoHub map editor and viewer

pnpm-lock.yaml

@@ -76,6 +76,7 @@
 		"@undp-data/svelte-undp-components": "workspace:*",
 		"@undp-data/svelte-undp-design": "workspace:*",
 		"@undp-data/undp-bulma": "workspace:*",
+		"@watergis/maplibre-gl-terradraw": "^1.3.13",
 		"@watergis/svelte-splitter": "^2.0.0",
 		"@zerodevx/svelte-toast": "^0.9.6",
 		"arraystat": "^1.7.81",

sites/geohub/package.json

@@ -7,6 +7,7 @@
 	import type { DashboardMapStyle } from '$lib/types';
 	import type { LayerListStore } from '$stores';
 	import { ModalTemplate, Notification } from '@undp-data/svelte-undp-components';
+	import { cleanMaplibreStyle } from '@watergis/maplibre-gl-terradraw';
 	import type { Map, StyleSpecification } from 'maplibre-gl';
 	import { untrack } from 'svelte';
 
@@ -139,11 +140,13 @@
 
 	const createStyleJSON2Generate = () => {
 		if (!map) return;
-		const style: StyleSpecification = map.getStyle();
+		let style: StyleSpecification = map.getStyle();
 		if ($layerList.length === 0) {
 			return;
 		}
 
+		style = cleanMaplibreStyle(style, { excludeTerraDrawLayers: true });
+
 		style.name = styleName;
 		const center = map.getCenter();
 		style.center = [center.lng, center.lat];

sites/geohub/src/components/pages/map/layers/StyleSaveDialog.svelte

@@ -31,6 +31,8 @@
 	import MaplibreCgazAdminControl from '@undp-data/cgaz-admin-tool';
 	import MaplibreStyleSwitcherControl from '@undp-data/style-switcher';
 	import { MAPSTORE_CONTEXT_KEY, type MapStore } from '@undp-data/svelte-undp-components';
+	import { MaplibreMeasureControl } from '@watergis/maplibre-gl-terradraw';
+	import '@watergis/maplibre-gl-terradraw/dist/maplibre-gl-terradraw.css';
 	import {
 		AttributionControl,
 		GeolocateControl,
@@ -73,6 +75,7 @@
 
 	let container: HTMLDivElement | undefined = $state();
 	let styleSwitcher: MaplibreStyleSwitcherControl;
+	let measureControl: MaplibreMeasureControl | undefined = $state();
 
 	const layerListStorageKey = storageKeys.layerList(page.url.host);
 	const mapStyleStorageKey = storageKeys.mapStyle(page.url.host);
@@ -224,15 +227,24 @@
 				step: 9,
 				scrollTo: 'off'
 			},
-
+			{
+				title: 'Measuring distance, area and elevation',
+				intro: `
+            You can measure distance, area and elevation by drawing point, line or polygon.
+            `,
+				element: '.maplibregl-terradraw-render-button',
+				position: 'left',
+				step: 10,
+				scrollTo: 'off'
+			},
 			{
 				title: 'Disable hillshade layer',
 				intro: `
             As default, a hillshade layer is shown on the basemap. You can also disable hillshade layer if you want.
             `,
 				element: '.maplibregl-ctrl-hillshade-visibility',
 				position: 'left',
-				step: 10,
+				step: 11,
 				scrollTo: 'off'
 			},
 			{
@@ -242,7 +254,7 @@
             `,
 				element: '.maplibregl-ctrl-geolocate',
 				position: 'left',
-				step: 11,
+				step: 12,
 				scrollTo: 'off'
 			},
 			{
@@ -251,7 +263,7 @@
 					'You have completed map editor tour. Now you can start exploring GeoHub to create a beautiful map. You can always come back to the tour by clicking this button',
 				element: '.tour-control-button',
 				position: 'left',
-				step: 12,
+				step: 13,
 				scrollTo: 'off'
 			}
 		]
@@ -448,6 +460,14 @@
 		});
 		$map.addControl(styleSwitcher, 'bottom-left');
 
+		measureControl = new MaplibreMeasureControl({
+			modes: ['render', 'point', 'linestring', 'polygon', 'delete'],
+			open: false,
+			computeElevation: true
+		});
+		measureControl.fontGlyphs = ['Proxima Nova Italic'];
+		$map.addControl(measureControl, 'bottom-right');
+
 		$map.once('load', mapInitializeAfterLoading);
 	};
 
@@ -474,6 +494,9 @@
 
 		map.subscribe((value) => {
 			let storageValue = value ? value.getStyle() : null;
+			if (storageValue && measureControl) {
+				storageValue = measureControl.cleanStyle(storageValue, { excludeTerraDrawLayers: true });
+			}
 			toLocalStorage(mapStyleStorageKey, storageValue);
 		});
 
@@ -497,10 +520,16 @@
 		$map.on('styledata', async () => {
 			$showProgressBarStore = false;
 			let storageValue = $map.getStyle();
+			if (storageValue && measureControl) {
+				storageValue = measureControl.cleanStyle(storageValue, { excludeTerraDrawLayers: true });
+			}
 			toLocalStorage(mapStyleStorageKey, storageValue);
 		});
 		$map.on('projectiontransition', () => {
 			let storageValue = $map.getStyle();
+			if (storageValue && measureControl) {
+				storageValue = measureControl.cleanStyle(storageValue, { excludeTerraDrawLayers: true });
+			}
 			toLocalStorage(mapStyleStorageKey, storageValue);
 		});
 	};

sites/geohub/src/routes/(app)/maps/[[id]]/edit/+page.svelte

@@ -34,6 +34,8 @@
 		type BreadcrumbPage,
 		type Tab
 	} from '@undp-data/svelte-undp-components';
+	import { MaplibreMeasureControl } from '@watergis/maplibre-gl-terradraw';
+	import '@watergis/maplibre-gl-terradraw/dist/maplibre-gl-terradraw.css';
 	import { toast } from '@zerodevx/svelte-toast';
 	import {
 		AttributionControl,
@@ -192,6 +194,14 @@
 		});
 		map.addControl(styleSwitcher, 'bottom-left');
 
+		const measureControl = new MaplibreMeasureControl({
+			modes: ['render', 'point', 'linestring', 'polygon', 'delete'],
+			open: false,
+			computeElevation: true
+		});
+		measureControl.fontGlyphs = ['Proxima Nova Italic'];
+		map.addControl(measureControl, 'bottom-right');
+
 		map.once('load', async () => {
 			map.resize();
 			await styleSwitcher.initialise();