feat(mapper): basemap control component + opfs pmtile support (pt1) (#…

…1922)

* refactor(mapper): move qr dialog to separate component

* fix(mapper): default load map page, only load qrcode page on first load

* build: add pmtiles and maplibre-gl explicitly to mapper frontend deps

* ci: small fix to env var substitution for ci

* test: remove trailing slash from osmauth route

* fix: allow providing manual thumbnail for base layers

* feat: add custom baselayer with oam logo

* feat: add basemap component for handling download + opfs pmtiles

.env.example

@@ -19,7 +19,7 @@ OSM_CLIENT_ID=${OSM_CLIENT_ID}
 OSM_CLIENT_SECRET=${OSM_CLIENT_SECRET}
 OSM_URL=${OSM_URL:-"https://www.openstreetmap.org"}
 OSM_SCOPE=${OSM_SCOPE:-'["read_prefs", "send_messages"]'}
-OSM_LOGIN_REDIRECT_URI=${OSM_LOGIN_REDIRECT_URI:-"http${FMTM_DOMAIN:+s}://${FMTM_DOMAIN:-127.0.0.1:7051}/osmauth"}
+OSM_LOGIN_REDIRECT_URI=${OSM_LOGIN_REDIRECT_URI:-http${FMTM_DOMAIN:+s}://${FMTM_DOMAIN:-127.0.0.1:7051}/osmauth}
 OSM_SECRET_KEY=${OSM_SECRET_KEY}
 
 ### S3 File Storage ###

src/frontend/e2e/auth.setup.ts

@@ -13,7 +13,7 @@ setup('authenticate', async ({ browserName, page }) => {
 
   // Note this sets a token so we can proceed, but the login will be
   // overwritten by svcfmtm localadmin user (as DEBUG=True)
-  await page.goto('/playwright-temp-login/');
+  await page.goto('/playwright-temp-login');
 
   // Now check we are signed in as localadmin
   await page.waitForSelector('text=localadmin');

src/frontend/src/routes.jsx

@@ -179,7 +179,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/osmauth/',
+        path: '/osmauth',
         element: (
           <Suspense fallback={<div>Loading...</div>}>
             <ErrorBoundary>
@@ -189,7 +189,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/playwright-temp-login/',
+        path: '/playwright-temp-login',
         element: (
           <Suspense fallback={<div>Loading...</div>}>
             <ErrorBoundary>

src/mapper/package.json

@@ -52,7 +52,9 @@
 		"@turf/helpers": "^7.1.0",
 		"drizzle-orm": "^0.35.3",
 		"flatgeobuf": "^3.35.0",
+		"maplibre-gl": "^4.7.1",
 		"pako": "^2.1.0",
+		"pmtiles": "^4.0.1",
 		"svelte-maplibre": "^0.9.14",
 		"uuid": "^11.0.2"
 	},

src/mapper/src/constants/baseLayers.ts

@@ -1,3 +1,5 @@
+import oamLogo from '$assets/images/oam-logo.svg';
+
 export const osmStyle = {
 	id: 'OSM Raster',
 	version: 8,
@@ -105,4 +107,31 @@ let satellite = {
 	],
 };
 
+export const customStyle = {
+	id: 'Custom',
+	version: 8,
+	name: 'Custom',
+	metadata: {
+		thumbnail: oamLogo,
+	},
+	sources: {
+		custom: {
+			type: 'raster',
+			url: '',
+			tileSize: 512,
+			attribution: 'Protmaps',
+		},
+	},
+	layers: [
+		{
+			id: 'custom',
+			type: 'raster',
+			source: 'custom',
+			layout: {
+				visibility: 'visible',
+			},
+		},
+	],
+};
+
 export const baseLayers = [stamenStyle, esriStyle, satellite];

src/mapper/src/lib/components/map/layer-switcher.svelte

@@ -84,7 +84,7 @@ map = new Map({
 	 * Process the style to add metadata and return it.
 	 */
 	function processStyle(style: maplibregl.StyleSpecification): MapLibreStylePlusMetadata {
-		const thumbnailUrl = getRasterThumbnailUrl(style);
+		const thumbnailUrl = style?.metadata?.thumbnail || getRasterThumbnailUrl(style);
 		return {
 			...style,
 			metadata: {

src/mapper/src/lib/components/map/main.svelte

@@ -15,6 +15,8 @@
 		ControlGroup,
 		ControlButton,
 	} from 'svelte-maplibre';
+	import maplibre from 'maplibre-gl';
+	import { Protocol } from 'pmtiles';
 	import { polygon } from '@turf/helpers';
 	import { buffer } from '@turf/buffer';
 	import { bbox } from '@turf/bbox';
@@ -30,10 +32,10 @@
 	import Geolocation from '$lib/components/map/geolocation.svelte';
 	import FlatGeobuf from '$lib/components/map/flatgeobuf-layer.svelte';
 	import { getTaskStore } from '$store/tasks.svelte.ts';
-	import { getProjectSetupStepStore } from '$store/common.svelte.ts';
+	import { getProjectSetupStepStore, getProjectBasemapStore } from '$store/common.svelte.ts';
 	// import { entityFeatcolStore, selectedEntityId } from '$store/entities';
 	import { projectSetupStep as projectSetupStepEnum } from '$constants/enums.ts';
-	import { baseLayers, osmStyle } from '$constants/baseLayers.ts';
+	import { baseLayers, osmStyle, customStyle } from '$constants/baseLayers.ts';
 
 	type bboxType = [number, number, number, number];
 
@@ -49,12 +51,31 @@
 
 	const taskStore = getTaskStore();
 	const projectSetupStepStore = getProjectSetupStepStore();
+	const projectBasemapStore = getProjectBasemapStore();
 
 	let map: maplibregl.Map | undefined = $state();
 	let loaded: boolean = $state(false);
 	let taskAreaClicked: boolean = $state(false);
 	let toggleGeolocationStatus: boolean = $state(false);
 	let projectSetupStep = $state(null);
+	// If no custom layer URL, omit, else set URL from projectPmtilesUrl
+	let processedBaseLayers = $derived(
+		[
+			...baseLayers,
+			...(projectBasemapStore.projectPmtilesUrl
+				? [{
+					...customStyle,
+					sources: {
+						...customStyle.sources,
+						custom: {
+							...customStyle.sources.custom,
+							url: projectBasemapStore.projectPmtilesUrl,
+						},
+					},
+				}]
+				: []),
+		]
+	);
 
 	$effect(() => {
 		projectSetupStep = +projectSetupStepStore.projectSetupStep;
@@ -64,6 +85,11 @@
 	$effect(() => {
 		if (map) {
 			setMapRef(map);
+			// Register pmtiles protocol
+			if (!maplibre.config.REGISTERED_PROTOCOLS.hasOwnProperty('pmtiles')) {
+				let protocol = new Protocol();
+				maplibre.addProtocol('pmtiles', protocol.tile);
+			}
 		}
 	});
 
@@ -103,6 +129,7 @@
 		{ id: 'locationDot', url: LocationDotImg },
 	]}
 >
+	<!-- Controls -->
 	<NavigationControl position="top-left" />
 	<ScaleControl />
 	<Control class="flex flex-col gap-y-2" position="top-left">
@@ -115,6 +142,10 @@
 			>
 		</ControlGroup></Control
 	>
+	<Control class="flex flex-col gap-y-2" position="bottom-right">
+		<LayerSwitcher {map} extraStyles={processedBaseLayers} sourcesIdToReAdd={['tasks', 'entities', 'geolocation']} />
+		<Legend />
+	</Control>
 	<!-- Add the Geolocation GeoJSON layer to the map -->
 	{#if toggleGeolocationStatus}
 		<Geolocation bind:map bind:toggleGeolocationStatus></Geolocation>
@@ -191,10 +222,18 @@
 			manageHoverState
 		/>
 	</FlatGeobuf>
-	<Control class="flex flex-col gap-y-2" position="bottom-right">
-		<LayerSwitcher {map} extraStyles={baseLayers} sourcesIdToReAdd={['tasks', 'entities', 'geolocation']} />
-		<Legend />
-	</Control>
+
+	<!-- Offline pmtiles, if present (alternative approach, not baselayer) -->
+	<!-- {#if projectBasemapStore.projectPmtilesUrl}
+	<RasterTileSource
+		url={projectBasemapStore.projectPmtilesUrl}
+		tileSize={512}
+	>
+		<RasterLayer id="pmtile-basemap" paint={{'raster-opacity': 0.8}}></RasterLayer>
+	</RasterTileSource>
+	{/if} -->
+
+	<!-- Help text for user on first load -->
 	{#if projectSetupStep === projectSetupStepEnum['task_selection']}
 		<div class="absolute top-5 w-fit bg-[#F097334D] z-10 left-[50%] translate-x-[-50%] p-1">
 			<p class="uppercase font-barlow-medium text-base">please select a task / feature for mapping</p>