Enable FreieTonne layers again using new service

Author: cdauth

frontend/package.json

@@ -61,6 +61,7 @@
     "leaflet-doubletapdrag": "^0.1.2",
     "leaflet-doubletapdragzoom": "^0.3.2",
     "leaflet-draggable-lines": "^3.2.1",
+    "leaflet-freie-tonne": "^2.1.2",
     "leaflet-mouse-position": "^1.2.0",
     "leaflet.heightgraph": "^1.4.0",
     "leaflet.locatecontrol": "^0.83.1",

frontend/src/lib/components/client-provider.vue

@@ -14,6 +14,8 @@
 	function isMapNotFoundError(serverError: Client["serverError"]): boolean {
 		return !!serverError && serverError instanceof MapNotFoundError;
 	}
+
+	export const activeClients = new Set<ClientContext>();
 </script>
 
 <script setup lang="ts">
@@ -65,6 +67,7 @@
 			}
 		});
 		connectingClient.value = newClient;
+		activeClients.add(newClient);
 
 		let lastMapId: MapId | undefined = undefined;
 		let lastMapData: MapData | undefined = undefined;
@@ -93,11 +96,15 @@
 		if (toRaw(connectingClient.value) !== newClient) {
 			// Another client has been initiated in the meantime
 			newClient.disconnect();
+			activeClients.delete(newClient);
 			return;
 		}
 
 		connectingClient.value = undefined;
-		client.value?.disconnect();
+		if (client.value) {
+			client.value.disconnect();
+			activeClients.delete(toRaw(client.value));
+		}
 		client.value = newClient;
 	}, { immediate: true });
 

frontend/src/map/map.ts

@@ -6,6 +6,8 @@ import "../lib/bootstrap.scss"; // Not imported in lib/index.ts because we don't
 import { setLayerOptions } from "facilmap-leaflet";
 import config from "./config";
 import { registerDereferrerHandler } from "../utils/dereferrer";
+import { getFreieTonneUrl, setFreieTonneFetchAdapter } from "leaflet-freie-tonne";
+import { activeClients } from "../lib/components/client-provider.vue";
 
 if (import.meta.hot) {
 	// Prevent full reload, see https://github.com/vitejs/vite/issues/5763#issuecomment-1974235806
@@ -35,6 +37,20 @@ const initialMapId = decodeURIComponent(location.pathname.match(/[^/]*$/)![0]) |
 
 registerDereferrerHandler(baseUrl);
 
+setFreieTonneFetchAdapter(async (bounds, zoom) => {
+	const url = getFreieTonneUrl(bounds, zoom);
+	const client = activeClients.values().next().value;
+	if (client) {
+		const result = await client.find({ query: url, loadUrls: true });
+		if (typeof result !== "string") {
+			throw new Error(`Search for URL (${url}) did not return string.`);
+		}
+		return result;
+	} else {
+		return await fetch(url).then((res) => res.text());
+	}
+});
+
 if(!location.hash || location.hash == "#") {
 	const moveKeys = Object.keys(queryParams).filter((key) => ([ "zoom", "lat", "lon", "layer", "l", "q", "s", "c" ].includes(key)));
 	if(moveKeys.length > 0) {

leaflet/package.json

@@ -46,7 +46,7 @@
     "filtrex": "^2.2.3",
     "leaflet-auto-graticule": "^2.0.0",
     "leaflet-draggable-lines": "^3.2.1",
-    "leaflet-freie-tonne": "^2.0.1",
+    "leaflet-freie-tonne": "^2.1.2",
     "leaflet-highlightable-layers": "^4.0.4",
     "leaflet.markercluster": "^1.5.3",
     "lodash-es": "^4.17.21"

leaflet/src/layers.ts

@@ -2,6 +2,7 @@ import { Layer, Map, tileLayer, type TileLayer } from "leaflet";
 import AutoGraticule from "leaflet-auto-graticule";
 import { getI18n } from "./utils/i18n";
 import { markdownInline } from "facilmap-utils";
+import FreieTonne from "leaflet-freie-tonne";
 
 export const defaultVisibleLayers: VisibleLayers = {
 	baseLayer: "Mpnk",
@@ -99,11 +100,11 @@ export function createDefaultLayers(): Layers & { fallbackLayer: string | undefi
 				noWrap: true
 			})),
 
-			// MpnW: fixAttribution(tileLayer("http://ftdl.de/tile-cache/tiles/{z}/{x}/{y}.png", {
-			// 	...fmName(() => getI18n().t("layers.mpnw-name")),
-			// 	...attribution(() => getI18n().t("layers.mpnw-attribution")),
-			// 	noWrap: true
-			// })),
+			MpnW: fixAttribution(tileLayer("https://www.freietonne.de/seekarte-2.0/tah.openstreetmap.org/Tiles/TileCache.php?z={z}&x={x}&y={y}.png", {
+				...fmName(() => getI18n().t("layers.mpnw-name")),
+				...attribution(() => getI18n().t("layers.mpnw-attribution")),
+				noWrap: true
+			})),
 		},
 		overlays: {
 			OPTM: fixAttribution(tileLayer("https://pt.facilmap.org/tile/{z}/{x}/{y}.png", {
@@ -173,12 +174,12 @@ export function createDefaultLayers(): Layers & { fallbackLayer: string | undefi
 				noWrap: true
 			}),
 
-			// FrTo: fixAttribution(new FreieTonne({
-			// 	...fmName(() => getI18n().t("layers.frto-name")),
-			// 	...attribution(() => getI18n().t("layers.frto-attribution")),
-			// 	zIndex: 300,
-			// 	noWrap: true
-			// }))
+			FrTo: fixAttribution(new FreieTonne({
+				...fmName(() => getI18n().t("layers.frto-name")),
+				...attribution(() => getI18n().t("layers.frto-attribution")),
+				zIndex: 300,
+				noWrap: true
+			}))
 		},
 		fallbackLayer: 'Mpnk'
 	};

server/src/search.ts

@@ -50,7 +50,7 @@ async function _loadUrl(url: string): Promise<string> {
 
 	const body = new TextDecoder().decode(stripBomBuf(bodyBuf));
 
-	if(url.match(/^https?:\/\/www\.freietonne\.de\/seekarte\/getOpenLayerPois\.php\?/))
+	if(url.match(/^https?:\/\/www\.freietonne\.de\/seekarte(-[0-9.]+)?\/getOpenLayerPois\.php\?/))
 		return body;
 	else if(body.match(/^\s*</)) {
 		const $ = load(body, { xmlMode: true });

yarn.lock

@@ -4147,6 +4147,7 @@ __metadata:
     leaflet-doubletapdrag: ^0.1.2
     leaflet-doubletapdragzoom: ^0.3.2
     leaflet-draggable-lines: ^3.2.1
+    leaflet-freie-tonne: ^2.1.2
     leaflet-mouse-position: ^1.2.0
     leaflet.heightgraph: ^1.4.0
     leaflet.locatecontrol: ^0.83.1
@@ -4223,7 +4224,7 @@ __metadata:
     happy-dom: ^17.1.8
     leaflet-auto-graticule: ^2.0.0
     leaflet-draggable-lines: ^3.2.1
-    leaflet-freie-tonne: ^2.0.1
+    leaflet-freie-tonne: ^2.1.2
     leaflet-highlightable-layers: ^4.0.4
     leaflet.markercluster: ^1.5.3
     lodash-es: ^4.17.21
@@ -5785,12 +5786,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"leaflet-freie-tonne@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "leaflet-freie-tonne@npm:2.0.1"
+"leaflet-freie-tonne@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "leaflet-freie-tonne@npm:2.1.2"
   peerDependencies:
     leaflet: x
-  checksum: d9f7d7c6bf62d7d4421933b295d9226d01bc314e1c5bbe33421f6e9eda16cf3d5bf3a8c5a6e573f3b2e44b55b483fed5c2717dd4c73cbc4a431f7ac5ba093323
+  checksum: b18dd958a74b10dd4f90a1287ef62ef73e2ee3172ab8f378faa31f05eed496e86b2497186e335679d4d69855987fc69133a2919e6eff6f65d4ccf279db348004
   languageName: node
   linkType: hard