UNDP-Data · JinIgarashi · May 16, 2025 · May 14, 2025 · May 14, 2025 · May 15, 2025
diff --git a/.changeset/crazy-hotels-train.md b/.changeset/crazy-hotels-train.md
@@ -0,0 +1,5 @@
+---
+"@undp-data/svelte-maplibre-storymap": minor
+---
+
+feat: add maplibre Globe mode feature and spinGlobe feature to storymap component.
diff --git a/.changeset/fast-plants-allow.md b/.changeset/fast-plants-allow.md
@@ -0,0 +1,5 @@
+---
+"geohub": minor
+---
+
+feat: add maplibre Globe mode feature and spinGlobe feature to storymap editor component.
diff --git a/.changeset/modern-needles-stand.md b/.changeset/modern-needles-stand.md
@@ -0,0 +1,5 @@
+---
+"geohub": minor
+---
+
+feat: add projection column to database table, and fixed storymap endpoints
diff --git a/.changeset/tangy-geese-deny.md b/.changeset/tangy-geese-deny.md
@@ -0,0 +1,6 @@
+---
+"@undp-data/svelte-maplibre-storymap": patch
+"geohub": patch
+---
+
+fix: change spinGlobe speed dynamically based on current zoom level.
diff --git a/.changeset/two-garlics-pick.md b/.changeset/two-garlics-pick.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: add debounce for storymap change event to mitigate updating components too much. also try to reuse the same instance
diff --git a/packages/svelte-maplibre-storymap/src/lib/StoryMap.svelte b/packages/svelte-maplibre-storymap/src/lib/StoryMap.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-	import type { StoryMapConfig, StoryMapTemplate } from '$lib/interfaces';
+	import type {
+		mapProjectionType,
+		StoryMapChapterType,
+		StoryMapConfig,
+		StoryMapTemplate
+	} from '$lib/interfaces';
 	import { initTooltipTippy } from '@undp-data/svelte-undp-components';
 	import { debounce } from 'lodash-es';
 	import {
@@ -8,13 +13,14 @@
 		Map,
 		NavigationControl,
 		type ControlPosition,
+		type ProjectionSpecification,
 		type StyleSpecification
 	} from 'maplibre-gl';
 	import 'maplibre-gl/dist/maplibre-gl.css';
 	import { Protocol } from 'pmtiles';
 	import scrollama from 'scrollama';
 	import { onMount, setContext } from 'svelte';
-	import { setLayerOpacity } from './helpers';
+	import { layerTypes, setLayerOpacity } from './helpers';
 	import MaplibreLegendControl from './MaplibreLegendControl.svelte';
 	import {
 		createMapStore,
@@ -65,6 +71,7 @@
 	let activeStyleOrigin = $state('');
 	let legendPosition: ControlPosition = $state('bottom-left');
 	let showLegend = $state(false);
+	let activeChapter: StoryMapChapterType | undefined = $state();
 
 	let navigationControl: NavigationControl;
 
@@ -79,6 +86,26 @@
 	// collapse legend for small screen device
 	let isLegendExpanded = $derived(innerWidth < 768 ? false : true);
 
+	const spinGlobe = () => {
+		const center = $mapStore.getCenter();
+
+		const zoom = $mapStore.getZoom();
+		const baseDelta = 5;
+		const adjustedDelta = baseDelta / Math.pow(2, zoom - 1);
+		const newCenter: [number, number] = [center.lng + adjustedDelta, center.lat];
+
+		let rotateNumber = $mapStore.getBearing();
+		if (activeChapter && activeChapter.rotateAnimation) {
+			rotateNumber = rotateNumber + 1;
+		}
+
+		$mapStore.easeTo(
+			{ center: newCenter, bearing: rotateNumber, duration: 100, easing: (n) => n },
+			'moveend'
+		);
+		$mapStore.once('moveend', spinGlobe);
+	};
+
 	onMount(async () => {
 		let protocol = new Protocol();
 		addProtocol('pmtiles', protocol.tile);
@@ -107,6 +134,18 @@
 			mapStyle.zoom = config.location.zoom;
 		}
 
+		let mapProjection: mapProjectionType;
+		if (config.projection) {
+			mapProjection = config.projection;
+		} else if (mapStyle.projection) {
+			mapProjection = mapStyle.projection.type as mapProjectionType;
+		} else {
+			mapProjection = 'mercator';
+		}
+		if (mapProjection) {
+			mapStyle.projection = { type: mapProjection };
+		}
+
 		const center = mapStyle.center ?? [0, 0];
 		const zoom = mapStyle.zoom ?? 0;
 		const bearing = mapStyle.bearing ?? 0;
@@ -169,6 +208,7 @@
 						activeStyleId = '';
 						activeStyleOrigin = '';
 					}
+					activeChapter = chapter;
 
 					if (navigationControl && $mapStore.hasControl(navigationControl)) {
 						$mapStore.removeControl(navigationControl);
@@ -179,17 +219,22 @@
 						const navPosition = chapter.mapNavigationPosition ?? 'top-right';
 						$mapStore.addControl(navigationControl, navPosition);
 					}
+
+					setChapterConfig(chapter);
 				})
 				.onStepExit((response) => {
 					if (activeId === response.element.id) {
 						if (config.chapters[config.chapters.length - 1].id !== response.element.id) {
 							activeId = '';
+							activeChapter = undefined;
+							$mapStore.off('moveend', spinGlobe);
 						}
 
 						map.resize();
 
 						const chapter = config.chapters.find((chap) => chap.id === response.element.id);
 						if (chapter) {
+							$mapStore.off('moveend', spinGlobe);
 							const eventLength = chapter.onChapterEnter?.length ?? 0;
 							if (eventLength > 0) {
 								if ($mapStore.loaded()) {
@@ -210,6 +255,116 @@
 		});
 	});
 
+	const setChapterConfig = async (chapter: StoryMapChapterType) => {
+		if (!$mapStore) return;
+		if (!chapter) return;
+
+		if (chapter.id !== activeId) return;
+		if (chapter.style) {
+			if ($currentStyle !== chapter.style) {
+				$currentStyle = chapter.style;
+			}
+		} else if ($currentStyle !== config.style) {
+			$currentStyle = config.style;
+		}
+
+		if (typeof $currentStyle === 'string') {
+			const res = await fetch($currentStyle);
+			$currentStyle = await res.json();
+		}
+
+		const eventLength = chapter.onChapterEnter?.length ?? 0;
+		if (eventLength > 0) {
+			const newStyle: StyleSpecification = JSON.parse(JSON.stringify($currentStyle));
+			chapter.onChapterEnter?.forEach((layer) => {
+				const index = newStyle.layers.findIndex((l) => l.id === layer.layer);
+				if (index === -1) return;
+				const l = newStyle.layers[index];
+				const props = layerTypes[l.type];
+				if (props && props.length > 0) {
+					props.forEach((prop) => {
+						newStyle.layers[index].paint[prop] = layer.opacity;
+					});
+				} else {
+					const visibility = layer.opacity === 0 ? 'none' : 'visible';
+					if (!newStyle.layers[index].layout) {
+						newStyle.layers[index].layout = {};
+					}
+					newStyle.layers[index].layout.visibility = visibility;
+				}
+			});
+			$currentStyle = newStyle;
+		}
+
+		let mapProjection: mapProjectionType;
+		if (chapter.projection) {
+			mapProjection = chapter.projection;
+		} else if (config.projection) {
+			mapProjection = config.projection;
+		} else {
+			mapProjection = 'mercator';
+		}
+		if (
+			!(mapProjection && ($currentStyle as StyleSpecification).projection?.type === mapProjection)
+		) {
+			($currentStyle as StyleSpecification).projection = { type: mapProjection };
+		}
+
+		if ($mapStore.isMoving()) {
+			$mapStore.stop();
+		}
+
+		$mapStore.setStyle($currentStyle);
+
+		$mapStore[chapter.mapAnimation || 'flyTo']({
+			center: chapter.location.center,
+			zoom: chapter.location.zoom,
+			bearing: chapter.location.bearing ?? 0,
+			pitch: chapter.location.pitch ?? 0
+		});
+
+		if (chapter.mapInteractive) {
+			$mapStore.scrollZoom.disable(); //disable scrollZoom because it will conflict with scrolling chapters
+			$mapStore.boxZoom.enable();
+			$mapStore.dragRotate.enable();
+			$mapStore.dragPan.enable();
+			$mapStore.keyboard.enable();
+			$mapStore.doubleClickZoom.enable();
+			$mapStore.touchZoomRotate.enable();
+			$mapStore.touchPitch.enable();
+			$mapStore.getCanvas().style.cursor = 'grab';
+		} else {
+			$mapStore.scrollZoom.disable();
+			$mapStore.boxZoom.disable();
+			$mapStore.dragRotate.disable();
+			$mapStore.dragPan.disable();
+			$mapStore.keyboard.disable();
+			$mapStore.doubleClickZoom.disable();
+			$mapStore.touchZoomRotate.disable();
+			$mapStore.touchPitch.disable();
+			$mapStore.getCanvas().style.cursor = 'default';
+		}
+
+		if (chapter.spinGlobe) {
+			if ($mapStore.loaded()) {
+				spinGlobe();
+			} else {
+				$mapStore.once('idle', spinGlobe);
+			}
+		}
+		if (!chapter.spinGlobe && chapter.rotateAnimation) {
+			$mapStore.once('moveend', () => {
+				const rotateNumber = $mapStore.getBearing();
+				$mapStore.rotateTo(rotateNumber + 180, {
+					duration: 30000,
+					easing: function (t) {
+						return t;
+					}
+				});
+			});
+		}
+	};
+
 	const getStyleInfo = (style: StyleSpecification | string) => {
 		if (typeof style !== 'string') return;
 		/* eslint-disable-next-line */
@@ -267,9 +422,24 @@
 				? ($configStore.location.pitch ?? 0)
 				: (style.pitch ?? 0);
 
-			$mapStore.setBearing(bearing);
-			$mapStore.setPitch(pitch);
-			$mapStore.flyTo({ center: center, zoom: zoom });
+			if ($mapStore.isMoving()) {
+				$mapStore.stop();
+			}
+
+			$mapStore.flyTo({ center: center, zoom: zoom, bearing: bearing, pitch: pitch });
+
+			let mapProjection: ProjectionSpecification;
+			if (style.projection) {
+				mapProjection = style.projection;
+			} else if (config.projection) {
+				mapProjection = { type: config.projection };
+			} else {
+				mapProjection = { type: 'mercator' };
+			}
+			if (mapProjection) {
+				style.projection = mapProjection;
+			}
+
 			$mapStore.setStyle(style);
 		} else {
 			const chapter = $configStore.chapters[index - 1];
@@ -374,6 +544,7 @@
 			bottom: 0;
 			width: 100%;
 			height: 100%;
+			background: linear-gradient(to right, #4286f4, #373b44);
 
 			.slide-progress {
 				position: absolute;