@panoramax/web-viewer 4.4.0-develop-3839b5a4 → 4.4.0-develop-f91f6758

package/{src → build}/utils/indoor.js

@@ -1,13 +1,13 @@
-import { IndoorEqualSpritesURL } from "./services";
-import { createWebComp } from "./widgets";
+import { IndoorEqualSpritesURL } from "./services.js";
+import { createWebComp } from "./widgets.js";
 
 export const DISABLED_LEVEL = "-1000";
 const LEVEL_SEM_LAYER = "levels";
 
 
 export function isIndoorEqualAvailable() {
-	/* eslint-disable no-undef */
 	try {
+		// eslint-disable-next-line no-undef
 		IndoorEqual;
 		return true;
 	}
@@ -28,12 +28,14 @@ export function initIndoorEqualOnMap(map, forceSwitchOn = false) {
 				return;
 			}
 
+			// eslint-disable-next-line no-undef
 			map.indoorEqual = new IndoorEqual(map, map._options.indoor);
 			map.addControl(map.indoorEqual);
 			map.indoorEqual.loadSprite(IndoorEqualSpritesURL());
 
 			// Override level refresh to keep "disabled" state after map move
 			map.indoorEqual._refreshAfterLevelsUpdate = function() {
+				// eslint-disable-next-line eqeqeq
 				if (!this.levels.includes(this.level) && this.level != DISABLED_LEVEL) {
 					this.setLevel("0");
 				}
@@ -58,7 +60,7 @@ export function initIndoorEqualOnMap(map, forceSwitchOn = false) {
 								levels.add(f.properties.level.toString());
 							}
 						});
-					
+
 					// Read levels from Panoramax tiles
 					this.map.querySourceFeatures(SEM_SRC_ID, { sourceLayer: "layer" })
 						.forEach(f => {
@@ -66,7 +68,7 @@ export function initIndoorEqualOnMap(map, forceSwitchOn = false) {
 								levels.add(f.properties["osm|level"].toString());
 							}
 						});
-					
+
 					// If at least one level exist, add floor just to be sure it's always present
 					if(levels.size > 0) { levels.add("0"); }
 
@@ -147,6 +149,7 @@ export function initIndoorEqualOnMap(map, forceSwitchOn = false) {
 					// Pictures
 					const nonGroundPics = new Set();
 					Object.entries(map._indoorFeaturesIDs.pictures).forEach(([lvl, features]) => {
+						// eslint-disable-next-line eqeqeq
 						if(lvl != "0") { features.forEach(f => nonGroundPics.add(f)); }
 					});
 					map.restrictVisibleFeatures("hide", "pictures", [...nonGroundPics]);
@@ -154,6 +157,7 @@ export function initIndoorEqualOnMap(map, forceSwitchOn = false) {
 					// Sequences
 					let nonGroundSeqs = new Set();
 					Object.entries(map._indoorFeaturesIDs.sequences).forEach(([lvl, features]) => {
+						// eslint-disable-next-line eqeqeq
 						if(lvl != "0") {
 							nonGroundSeqs = nonGroundSeqs.union(features);
 						}

package/{src → build}/utils/map.js

@@ -1,6 +1,10 @@
-import LoaderImg from "../img/marker.svg";
-import { COLORS, QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_RES_360_VALUES, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_POND_RES, QUALITYSCORE_POND_GPS } from "./utils";
-import { isNullId, QUALITYSCORE_VALUES, GPS_VALUES } from "./utils";
+import {
+	COLORS, GPS_VALUES, QUALITYSCORE_GPS_VALUES,
+	QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES, QUALITYSCORE_RES_360_VALUES,
+	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_VALUES, isNullId
+} from "./utils.js";
+
+const LoaderImg = new URL("../img/marker.svg", import.meta.url).href;
 
 export const RASTER_LAYER_ID = "pnx-aerial";
 
@@ -233,7 +237,7 @@ export function isNullCoordinates(c) {
 
 /**
  * Is given layer a label layer.
- * 
+ *
  * This is useful for inserting new vector layer before labels in MapLibre.
  * @param {object} l The layer to check
  * @returns {boolean} True if it's a label layer
@@ -421,7 +425,7 @@ export function mapFiltersToLayersFilters(filters, hasGridStats = false, feature
 
 	if(filters.camera && filters.camera !== "") {
 		mapFilters.camera = filters.camera;
-		// low/high model hack : to enable fuzzy filtering of camera make and model
+		// Low/high model hack : to enable fuzzy filtering of camera make and model
 		const lowModel = filters.camera.toLowerCase().trim() + "                    ";
 		const highModel = filters.camera.toLowerCase().trim() + "zzzzzzzzzzzzzzzzzzzz";
 		const collator = ["collator", { "case-sensitive": false, "diacritic-sensitive": false } ];
@@ -520,7 +524,7 @@ export function switchCoefValue(expr, newCoefVal) {
 /**
  * Creates links between map and photo elements.
  * This enable interactions like click on map showing picture.
- * 
+ *
  * @param {CoreView} parent The view containing both Photo and Map elements
  * @private
  */
@@ -617,7 +621,7 @@ export function linkMapAndPhoto(parent) {
  */
 export function initMapKeyboardHandler(parent) {
 	parent.map.keyboard.keydown = function(e) {
-		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		if (e.altKey || e.ctrlKey || e.metaKey) {return;}
 
 		// Custom keys
 		switch(e.key) {
@@ -630,23 +634,23 @@ export function initMapKeyboardHandler(parent) {
 		case "9":
 			parent.psv.goToNextPicture();
 			return;
-		
+
 		case "PageDown":
 		case "3":
 			parent.psv.goToPrevPicture();
 			return;
-		
+
 		case "Home":
 		case "7":
 			e.stopPropagation();
 			parent._toggleFocus();
 			return;
-		
+
 		case "End":
 		case "1":
 			parent.mini.toggleAttribute("collapsed");
 			return;
-		
+
 		case " ":
 		case "0":
 			parent.psv.toggleSequencePlaying();

package/{src → build}/utils/picture.js

@@ -1,7 +1,7 @@
-import ArrowTriangleSVG from "../img/arrow_triangle.svg";
-import ArrowTurnSVG from "../img/arrow_turn.svg";
-import { svgToPSVLink, COLORS, getDistance, getSimplifiedAngle, getArrow } from "./utils";
+import { COLORS, getArrow, getDistance, getSimplifiedAngle, svgToPSVLink } from "./utils.js";
 
+const ArrowTriangleSVG = await fetch(new URL("../img/arrow_triangle.svg", import.meta.url).href).then(res => res.text());
+const ArrowTurnSVG = await fetch(new URL("../img/arrow_turn.svg", import.meta.url).href).then(res => res.text());
 const ArrowTriangle = svgToPSVLink(ArrowTriangleSVG, "white");
 const ArrowTurn = svgToPSVLink(ArrowTurnSVG, COLORS.NEXT);
 
@@ -33,7 +33,8 @@ export function getExifFloat(val) {
 
 		// Try a direct cast to float
 		try { return parseFloat(val); }
-		catch(e) {} // eslint-disable-line no-empty
+		 
+		catch(e) {}
 
 		// Unrecognized
 		return undefined;
@@ -51,7 +52,7 @@ export function getGPSPrecision(picture) {
 	let quality = null;
 	const gpsHPosError = picture?.properties?.["quality:horizontal_accuracy"] || getExifFloat(picture?.properties?.exif?.["Exif.GPSInfo.GPSHPositioningError"]);
 	const gpsDop = getExifFloat(picture?.properties?.exif?.["Exif.GPSInfo.GPSDOP"]);
-	
+
 	if(gpsHPosError !== undefined) {
 		quality = `${gpsHPosError} m`;
 	}
@@ -101,7 +102,7 @@ export function getSphereCorrection(picture) {
 	// Check if yaw is applicable: different from photo direction
 	if(Math.round(dir) === Math.round(yaw) && yaw > 0) {
 		console.warn("Picture with UUID", picture.id, "has same GPS Image direction and Yaw, could cause rendering issues");
-		// yaw = 0;
+		// Yaw = 0;
 	}
 
 	// Pitch
@@ -167,6 +168,7 @@ export function getCroppedPanoData(picture, img) {
 					croppedHeight: parseInt(sad[1]) - parseInt(va[3]) - parseInt(va[1]),
 				};
 			}
+			 
 			catch(e) {
 				console.warn("Invalid pers:interior_orientation values for cropped panorama "+picture.id);
 			}
@@ -188,6 +190,7 @@ export function getCroppedPanoData(picture, img) {
 			if(res.croppedWidth > res.fullWidth) { res.fullWidth = res.croppedWidth; }
 			if(res.croppedHeight > res.fullHeight) { res.fullHeight = res.croppedHeight; }
 		}
+		 
 		catch(e) {
 			console.warn("Invalid XMP.GPano values for cropped panorama "+picture.id);
 		}
@@ -200,6 +203,7 @@ export function getCroppedPanoData(picture, img) {
 			(!res.fullWidth && !res.croppedWidth && res.fullHeight && !res.croppedHeight)
 			|| (res.fullWidth && !res.croppedWidth && !res.fullHeight && !res.croppedHeight)
 			|| (res.fullWidth && !res.croppedWidth && res.fullHeight && !res.croppedHeight)
+			// eslint-disable-next-line eqeqeq
 			|| (res.fullWidth == res.croppedWidth && res.fullHeight == res.croppedHeight)
 		) {
 			res = {};
@@ -224,7 +228,7 @@ export function getCroppedPanoData(picture, img) {
 
 /**
  * Compare function to retrieve most appropriate picture in a single direction.
- * 
+ *
  * @param {number[]} picPos The picture [x,y] position
  * @returns {function} A compare function for sorting
  * @private
@@ -232,13 +236,13 @@ export function getCroppedPanoData(picture, img) {
 export function sortPicturesInDirection(picPos) {
 	return (a,b) => {
 		// Two prev/next links = no sort
-		if(a.rel != "related" && b.rel != "related") { return 0; }
+		if(a.rel !== "related" && b.rel !== "related") { return 0; }
 		// First is prev/next link = goes first
-		else if(a.rel != "related") { return -1; }
+		else if(a.rel !== "related") { return -1; }
 		// Second is prev/next link = goes first
-		else if(b.rel != "related") { return 1; }
+		else if(b.rel !== "related") { return 1; }
 		// Two related links same day = nearest goes first
-		else if(a.date == b.date) { return getDistance(picPos, a.geometry.coordinates) - getDistance(picPos, b.geometry.coordinates); }
+		else if(a.date === b.date) { return getDistance(picPos, a.geometry.coordinates) - getDistance(picPos, b.geometry.coordinates); }
 		// Two related links at different day = recent goes first
 		else { return b.date.localeCompare(a.date); }
 	};
@@ -287,7 +291,7 @@ export function getNodeCaption(metadata, t) {
 			caption.producer = [];
 			Object.values(producersDeduped).forEach(pv => {
 				const deflt = pv[0];
-				const better = pv.find(v => v.toLowerCase() != v);
+				const better = pv.find(v => v.toLowerCase() !== v);
 				caption.producer.push(better || deflt);
 			});
 		}
@@ -310,7 +314,7 @@ export function getNodeCaption(metadata, t) {
 
 /**
  * Transforms a GeoJSON feature from the STAC API into a PSV node.
- * 
+ *
  * @param {object} f The API GeoJSON feature
  * @param {object} t The labels translations container
  * @param {boolean} [fastInternet] True if Internet speed is high enough for loading HD flat pictures
@@ -320,6 +324,7 @@ export function getNodeCaption(metadata, t) {
  * @private
  */
 export function apiFeatureToPSVNode(f, t, fastInternet=false, customLinkFilter=null, urlCleaner=(u => u)) {
+	// eslint-disable-next-line eqeqeq
 	const isHorizontalFovDefined = f.properties?.["pers:interior_orientation"]?.["field_of_view"] != null;
 	let horizontalFov = isHorizontalFovDefined ? parseInt(f.properties["pers:interior_orientation"]["field_of_view"]) : 70;
 	const is360 = horizontalFov === 360;
@@ -426,7 +431,7 @@ export function apiFeatureToPSVNode(f, t, fastInternet=false, customLinkFilter=n
 		origInstance,
 		properties: f.properties,
 	};
-	
+
 	return node;
 }
 
@@ -457,7 +462,7 @@ export function filterRelatedPicsLinks(metadata, customFilter = null) {
 
 	for(let direction in picSurroundings) {
 		const picsInDirection = picSurroundings[direction];
-		if(picsInDirection.length == 0) { continue; }
+		if(picsInDirection.length === 0) { continue; }
 		picsInDirection.sort(sortPicturesInDirection(picPos));
 		filteredLinks.push(picsInDirection.shift());
 	}
@@ -485,7 +490,7 @@ export function filterRelatedPicsLinks(metadata, customFilter = null) {
  */
 export function getHashTags(metadata) {
 	if(!metadata?.properties?.semantics) { return []; }
-	
+
 	// Find hashtag entry in semantics
 	const hashtagsTags = metadata.properties.semantics.filter(kv => kv.key === "hashtags");
 	const readHashTags = [];
@@ -500,4 +505,4 @@ export function getHashTags(metadata) {
  */
 export function hasAnnotations(metadata) {
 	return metadata?.properties?.annotations?.length > 0;
-}
+}

package/{src → build}/utils/semantics.js

@@ -1,8 +1,9 @@
 import { html } from "lit";
-import logoOsm from "../img/osm.svg";
-import logoWd from "../img/wd.svg";
-import { OSMWikiURL, WikidataURL, PanoramaxPresetsURL, OSMURL, WikidataAPIURL } from "./services";
-import { getBestLabel } from "./i18n";
+import { OSMURL, OSMWikiURL, PanoramaxPresetsURL, WikidataAPIURL, WikidataURL } from "./services.js";
+import { getBestLabel } from "./i18n.js";
+
+const logoOsm = new URL("../img/osm.svg", import.meta.url).href;
+const logoWd = new URL("../img/wd.svg", import.meta.url).href;
 
 
 // List of [ Overlay ID, API filter, Maplibre Style, Sprites ]
@@ -172,6 +173,7 @@ export function decodeBasicTag(tag) {
 	const firstEqual = (tag || "").lastIndexOf("=");
 	if(firstEqual < 0) { return null; }
 
+	 
 	const key = decodeKey(tag.substring(0, firstEqual));
 	if(key.subkey.indexOf("=") >= 0) { return null; }
 
@@ -247,11 +249,13 @@ export function computeDiffTags(prev = [], next = []) {
 
 	// Look for new values
 	(next || [])
+		// eslint-disable-next-line eqeqeq
 		.filter(nt => prev.find(pt => pt.key == nt.key && pt.value == nt.value) === undefined)
 		.forEach(t => res.push({key: t.key, value: t.value, action: "add"}));
 
 	// Look for prev values missing in next
 	(prev || [])
+		// eslint-disable-next-line eqeqeq
 		.filter(pt => next.find(nt => pt.key == nt.key && pt.value == nt.value) === undefined)
 		.forEach(t => res.push({key: t.key, value: t.value, action: "delete"}));
 
@@ -272,7 +276,7 @@ export function groupByPrefix(tags) {
 	// First pass: analyze tags, separate by prefix
 	tags.forEach(tag => {
 		if(tag.action === "delete") { return; }
-		
+
 		const decodedKey = decodeKey(tag.key);
 
 		// Put apart qualifiers, to later insert on tags themselves

package/{src → build}/utils/utils.js

@@ -1,4 +1,4 @@
-import { InternetFastTestFile, InternetFastThreshold } from "./services";
+import { InternetFastTestFile, InternetFastThreshold } from "./services.js";
 
 export const DISABLE_ANNOTATIONS_PARAM = "pnx-disable-annotations";
 export const BASE_PANORAMA_ID = "geovisio-fake-id-0";
@@ -10,7 +10,7 @@ export const COLORS = {
 	NEXT: "#ffab40",
 
 	QUALI_1: "#00695C", // 360
-	QUALI_2: "#fd8d3c", // flat
+	QUALI_2: "#fd8d3c", // Flat
 
 	PALETTE_1: "#fecc5c", // Oldest
 	PALETTE_2: "#fd8d3c",
@@ -100,14 +100,15 @@ export function getDistance(from, to) {
  */
 export function svgToPSVLink(svg, fillColor) {
 	try {
-		const svgStr = atob(svg.replace(/^data:image\/svg\+xml;base64,/, ""));
-		const svgXml = (new DOMParser()).parseFromString(svgStr, "image/svg+xml").childNodes[0];
+		if(!svg.startsWith("<svg")) { throw new Error(); }
+		const svgXml = (new DOMParser()).parseFromString(svg, "image/svg+xml").childNodes[0];
 		const btn = document.createElement("button");
 		btn.appendChild(svgXml);
 		btn.classList.add("pnx-psv-tour-arrows", "pnx-print-hidden");
 		btn.style.color = fillColor;
 		return btn;
 	}
+	 
 	catch(e) {
 		const img = document.createElement("img");
 		img.src = svg;
@@ -306,6 +307,7 @@ export function josmBboxParameters(meta) {
 export function isInIframe() {
 	try {
 		return window.self !== window.top;
+	 
 	} catch(e) {
 		return true;
 	}
@@ -326,6 +328,7 @@ export function isInternetFast() {
 		return Promise.resolve(speed >= InternetFastThreshold());
 	}
 	// Fallback for other browsers
+	 
 	catch(e) {
 		try {
 			// Check if test has been done before and stored
@@ -353,6 +356,7 @@ export function isInternetFast() {
 				});
 		}
 		// Fallback for browser blocking third-party downloads or sessionStorage
+		 
 		catch(e) {
 			return Promise.resolve(false);
 		}

package/{src → build}/utils/widgets.js

@@ -1,6 +1,6 @@
 import { icon } from "@fortawesome/fontawesome-svg-core";
 import { setCustomIconLoader } from "iconify-icon";
-import { TemakiIconURL } from "./services";
+import { TemakiIconURL } from "./services.js";
 
 
 /**
@@ -52,7 +52,7 @@ export function createWebComp(tag, props = {}) {
 export function listenForMenuClosure(me, callback) {
 	// Other menu opened
 	me._parent?.addEventListener("menu-opened", e => {
-		if(e.detail.menu != me) { callback(); }
+		if(e.detail.menu !== me) { callback(); }
 	});
 
 	// Map click

package/build/viewer.html

@@ -1,36 +1,121 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><title>Panoramax Web Viewer</title><style>#viewer{position:relative;width:95%;margin:2.5%;height:400px}#viewer.fullpage{position:fixed;top:0;bottom:0;left:0;right:0;height:unset;width:unset;margin:0}</style><script defer="defer" src="index.js"></script><link href="index.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><pnx-viewer id="viewer" class="fullpage" map-options='{
-    raster: {
-      type: "raster",
-      tiles: [
-        "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
-      ],
-      minzoom: 0,
-      maxzoom: 19,
-      attribution: "&copy; IGN",
-      tileSize: 256
-    },
-    basemaps: {
-      "OSM Topo": "https://tile-vect.openstreetmap.fr/styles/topo/style.json",
-      "OSM FR": "https://a.tile.openstreetmap.fr/osmfr/{z:19}/{x}/{y}.png",
-      osmbzh: {
-        sources: {
-            "osmbzh": {
-                "type": "raster",
-                "tiles": ["https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png"],
-                "tileSize": 256,
-                "minzoom": 0,
-                "maxzoom": 19,
-                "attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> & <a href=\"http://www.openstreetmap.bzh/\">Breton OpenStreetMap Team</a>",
-            }
-        },
-        "layers": [
-            {
-                "id": "osmbzh",
-                "type": "raster",
-                "source": "osmbzh",
-                "metadata": {"name": "OSM e brezhoneg"}
-            }
-        ]
-      }
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <title>Panoramax Web Viewer</title>
+  <style>
+    #viewer {
+      position: relative;
+      width: 95%;
+      margin: 2.5%;
+      height: 400px;
+    }
+    #viewer.fullpage {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: unset;
+      width: unset;
+      margin: 0;
     }
-  }'></pnx-viewer><script src="./servers.js"></script><script>var viewer=document.getElementById("viewer");server===servers.meta&&viewer.setAttribute("metacatalog","false"),viewer.setAttribute("endpoint",server)</script></body></html>
+  </style>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.21.1/dist/maplibre-gl.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.1/index.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/virtual-tour-plugin@5.14.1/index.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin@5.14.1/index.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin@5.14.1/index.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/atkinson-hyperlegible-next/index.css" />
+</head>
+<body>
+  <script type="importmap">
+    {
+  "imports": {
+    "@fortawesome/fontawesome-svg-core": "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-svg-core@6.7.2/index.mjs",
+    "@fortawesome/free-regular-svg-icons": "https://cdn.jsdelivr.net/npm/@fortawesome/free-regular-svg-icons@6.7.2/index.mjs",
+    "@fortawesome/free-solid-svg-icons": "https://cdn.jsdelivr.net/npm/@fortawesome/free-solid-svg-icons@6.7.2/index.mjs",
+    "@maplibre/vt-pbf": "https://cdn.jsdelivr.net/npm/@maplibre/vt-pbf@4.3.0/dist/index.es.js",
+    "@mapbox/vector-tile": "https://cdn.jsdelivr.net/npm/@mapbox/vector-tile@2.0.4/index.js",
+    "@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.1/index.module.js",
+    "@photo-sphere-viewer/equirectangular-tiles-adapter": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/equirectangular-tiles-adapter@5.14.1/index.module.js",
+    "@photo-sphere-viewer/gallery-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin@5.14.1/index.module.js",
+    "@photo-sphere-viewer/markers-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin@5.14.1/index.module.js",
+    "@photo-sphere-viewer/compass-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/compass-plugin@5.14.1/index.module.js",
+    "@photo-sphere-viewer/virtual-tour-plugin": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/virtual-tour-plugin@5.14.1/index.module.js",
+    "geojson-vt": "https://cdn.jsdelivr.net/npm/geojson-vt@4.0.2/src/index.js",
+    "iconify-icon": "https://cdn.jsdelivr.net/npm/iconify-icon@3.0.2/dist/iconify-icon.mjs",
+    "json5": "https://cdn.jsdelivr.net/npm/json5@2.2.3/dist/index.min.mjs",
+    "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.2/index.js",
+    "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.2/",
+    "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.2/lit-html.js",
+    "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3.3.2/",
+    "lit-element/": "https://cdn.jsdelivr.net/npm/lit-element@4.2.2/",
+    "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl@5.21.1/dist/maplibre-gl.js",
+    "pmtiles": "https://cdn.jsdelivr.net/npm/pmtiles@4.4.0/dist/esm/index.js",
+    "query-selector-shadow-dom": "https://cdn.jsdelivr.net/npm/query-selector-shadow-dom@1.0.0/dist/querySelectorShadowDom.js",
+    "@panoramax/web-viewer": "./src/index.js",
+    "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.1.2/reactive-element.js",
+    "@mapbox/point-geometry": "https://cdn.jsdelivr.net/npm/@mapbox/point-geometry@1.1.0/index.js",
+    "fflate": "https://cdn.jsdelivr.net/npm/fflate@0.8.2/esm/browser.js",
+    "pbf": "https://cdn.jsdelivr.net/npm/pbf@4.0.1/index.js",
+    "three": "https://cdn.jsdelivr.net/npm/three@0.179.1/build/three.module.js"
+  }
+}
+  </script>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+
+  <pnx-viewer
+    id="viewer"
+    class="fullpage"
+    map-options='{
+      raster: {
+        type: "raster",
+        tiles: [
+          "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
+        ],
+        minzoom: 0,
+        maxzoom: 19,
+        attribution: "&copy; IGN",
+        tileSize: 256
+      },
+      basemaps: {
+        "OSM Topo": "https://tile-vect.openstreetmap.fr/styles/topo/style.json",
+        "OSM FR": "https://a.tile.openstreetmap.fr/osmfr/{z:19}/{x}/{y}.png",
+        osmbzh: {
+          sources: {
+              "osmbzh": {
+                  "type": "raster",
+                  "tiles": ["https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png"],
+                  "tileSize": 256,
+                  "minzoom": 0,
+                  "maxzoom": 19,
+                  "attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> & <a href=\"http://www.openstreetmap.bzh/\">Breton OpenStreetMap Team</a>",
+              }
+          },
+          "layers": [
+              {
+                  "id": "osmbzh",
+                  "type": "raster",
+                  "source": "osmbzh",
+                  "metadata": {"name": "OSM e brezhoneg"}
+              }
+          ]
+        }
+      }
+    }'
+  ></pnx-viewer>
+
+  <script type="module" src="./index.js"></script>
+  <script src="./servers.js"></script>
+  <script>
+    var viewer = document.getElementById("viewer");
+    if(server === servers.meta) { viewer.setAttribute("metacatalog", "false"); }
+    viewer.setAttribute("endpoint", server);
+  </script>
+</body>
+</html>