@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

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

@@ -1,11 +1,10 @@
-// DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
-import maplibregl from "!maplibre-gl";
 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 { autoDetectLocale } from "./I18n";
+import { COLORS, QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_RES_360_VALUES, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_POND_RES, QUALITYSCORE_POND_GPS } from "./utils";
+import { autoDetectLocale } from "./i18n";
+import { isNullId } from "./utils";
 
 export const DEFAULT_TILES = "https://panoramax.openstreetmap.fr/pmtiles/basic.json";
-export const RASTER_LAYER_ID = "gvs-aerial";
+export const RASTER_LAYER_ID = "pnx-aerial";
 
 export const TILES_PICTURES_ZOOM = 15;
 export const TILES_PICTURES_SYMBOL_ZOOM = 18;
@@ -37,7 +36,7 @@ export const VECTOR_STYLES = {
 			"icon-opacity": ["interpolate", ["linear"], ["zoom"], TILES_PICTURES_SYMBOL_ZOOM, 0, TILES_PICTURES_SYMBOL_ZOOM+1, 1],
 		},
 		"layout": {
-			"icon-image": ["case", ["==", ["get", "type"], "equirectangular"], "gvs-arrow-360", "gvs-arrow-flat"],
+			"icon-image": ["case", ["==", ["get", "type"], "equirectangular"], "pnx-arrow-360", "pnx-arrow-flat"],
 			"icon-size": ["interpolate", ["linear"], ["zoom"], TILES_PICTURES_SYMBOL_ZOOM, 0.5, 24, 1],
 			"icon-rotate": ["to-number", ["get", "heading"]],
 			"icon-allow-overlap": true,
@@ -92,7 +91,7 @@ export function getThumbGif(lang) {
 	thumbGif.src = LoaderImg;
 	thumbGif.alt = lang.loading;
 	thumbGif.title = lang.loading;
-	thumbGif.classList.add("gvs-map-thumb", "gvs-map-thumb-loader");
+	thumbGif.classList.add("pnx-map-thumb", "pnx-map-thumb-loader");
 	return thumbGif;
 }
 
@@ -106,7 +105,7 @@ export function getThumbGif(lang) {
  */
 export function isLabelLayer(l) {
 	return l.type === "symbol"
-		&& l?.layout?.["text-field"]
+		&& l?.layout?.["text-field"] !== undefined
 		&& (l.minzoom === undefined || l.minzoom < 15);
 }
 
@@ -123,9 +122,10 @@ export function isLabelLayer(l) {
  */
 export function combineStyles(parent, options) {
 	// Get basic vector styles
-	const style = parent._api.getMapStyle();
+	const style = parent.api.getMapStyle();
 	
 	// Complete styles
+	style.layers = style.layers || [];
 	style.layers = style.layers.concat(getMissingLayerStyles(style.sources, style.layers));
 	if(!style.metadata) { style.metadata = {}; }
 
@@ -136,13 +136,16 @@ export function combineStyles(parent, options) {
 		style.layers = style.layers.concat(options.supplementaryStyle.layers || []);
 	}
 
+	// Fix for empty layers causing sorting issues
+	style.layers = style.layers.filter(l => l.id);
+
 	// Aerial imagery background
 	if(options.raster) {
-		style.sources["gvs-aerial"] = options.raster;
+		style.sources["pnx-aerial"] = options.raster;
 		style.layers.push({
 			"id": RASTER_LAYER_ID,
 			"type": "raster",
-			"source": "gvs-aerial",
+			"source": "pnx-aerial",
 			"layout": {
 				"visibility": options.background === "aerial" ? "visible" : "none",
 			}
@@ -150,7 +153,7 @@ export function combineStyles(parent, options) {
 	}
 
 	// Filter out general tiles if necessary
-	if(!parent._options?.users?.includes("geovisio")) {
+	if(!parent?.users?.includes("geovisio")) {
 		style.layers.forEach(l => {
 			if(l.source === "geovisio") {
 				if(!l.layout) { l.layout = {}; }
@@ -181,7 +184,7 @@ export function combineStyles(parent, options) {
 
 	// Override labels to use appropriate language
 	if(style.metadata["panoramax:locales"]) {
-		let prefLang = parent._options.lang || autoDetectLocale(style.metadata["panoramax:locales"], "latin");
+		let prefLang = parent.lang || autoDetectLocale(style.metadata["panoramax:locales"], "latin");
 		if(prefLang.includes("-")) { prefLang = prefLang.split("-")[0]; }
 		if(prefLang.includes("_")) { prefLang = prefLang.split("_")[0]; }
 		style.layers.forEach(l => {
@@ -226,11 +229,11 @@ export function combineStyles(parent, options) {
  *   which didn't offer a MapLibre JSON style directly.
  * 
  * @param {object} sources Pre-existing MapLibre style sources
- * @param {object} layers Pre-existing MapLibre style layers
+ * @param {object[]} layers Pre-existing MapLibre style layers
  * @returns List of layers to add
  * @private
  */
-export function getMissingLayerStyles(sources, layers) {
+export function getMissingLayerStyles(sources = {}, layers = []) {
 	const newLayers = [];
 
 	// GeoVisio API <= 2.5.0 : add sequences + pictures
@@ -389,81 +392,257 @@ export function switchCoefValue(expr, newCoefVal) {
 }
 
 /**
- * Transforms a set of parameters into an URL-ready string
- * It also removes null/undefined values
- *
- * @param {object} params The parameters object
- * @return {string} The URL query part
+ * 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
  */
-export function geocoderParamsToURLString(params) {
-	let p = {};
-	Object.entries(params)
-		.filter(e => e[1] !== undefined && e[1] !== null)
-		.forEach(e => p[e[0]] = e[1]);
+export function linkMapAndPhoto(parent) {
+	// Switched picture
+	const onPicLoad = e => {
+		if(isNullId(e.detail.picId)) {
+			parent.map.displayPictureMarker();
+			if(parent?.isMapWide?.()) {
+				parent?.mini?.setAttribute("collapsed", "");
+			}
+		}
+		else {
+			parent.map.displayPictureMarker(e.detail.lon, e.detail.lat, parent.psv.getXY().x, e.detail.first);
+			if(parent?.isMapWide?.()) {
+				parent?.mini?.removeAttribute("collapsed");
+			}
+		}
+	};
+	parent.psv.addEventListener("picture-loading", onPicLoad);
+	parent.psv.addEventListener("picture-loaded", onPicLoad);
+
+	// Picture view rotated
+	parent.psv.addEventListener("view-rotated", () => {
+		let x = parent.psv.getPosition().yaw * (180 / Math.PI);
+		x += parent.psv.getPictureOriginalHeading();
+		parent.map._picMarker.setRotation(x);
+	});
+
+	// Picture preview
+	parent.psv.addEventListener("picture-preview-started", e => {
+		// Show marker corresponding to selection
+		parent.map._picMarkerPreview
+			.setLngLat(e.detail.coordinates)
+			.setRotation(e.detail.direction || 0)
+			.addTo(parent.map);
+	});
+
+	parent.psv.addEventListener("picture-preview-stopped", () => {
+		parent.map._picMarkerPreview.remove();
+	});
 
-	return new URLSearchParams(p).toString();
+	parent.psv.addEventListener("picture-loaded", e => {
+		if (parent.isWidthSmall() && parent._picPopup && e.detail.picId == parent._picPopup._picId) {
+			parent._picPopup.remove();
+		}
+	});
+
+	// Picture click
+	parent.map.on("picture-click", e => {
+		parent.select(e.seqId, e.picId);
+		if(!parent.psv._myVTour.state.currentNode && parent?._setFocus) { parent._setFocus("pic"); }
+	});
+
+	// Sequence click
+	parent.map.on("sequence-click", e => {
+		parent.api.getPicturesAroundCoordinates(
+			e.coordinates.lat,
+			e.coordinates.lng,
+			1,
+			1,
+			e.seqId
+		).then(results => {
+			if(results?.features?.length > 0) {
+				parent.select(results.features[0]?.collection, results.features[0].id);
+				if(!parent.psv.getPictureMetadata() && parent?._setFocus) { parent._setFocus("pic"); }
+			}
+		});
+	});
+
+	// Focus changes
+	if(parent._setFocus) {
+		// PSV double click
+		parent.psv.addEventListener("dblclick", () => { if(parent.isMapWide()) { parent._setFocus("pic"); } });
+
+		// Map double-click: unselect if focused, toggle focus if unfocused
+		parent.map.on("dblclick", () => {
+			if(!parent.isMapWide()) { parent._setFocus("map"); }
+			else { parent.select(); }
+		});
+	}
 }
 
 /**
- * Nominatim (OSM) geocoder, ready to use for our Map
+ * Adds events related to keyboard
  * @private
  */
-export function forwardGeocodingNominatim(config) {
-	// Transform parameters into Nominatim format
-	const params = {
-		q: config.query,
-		countrycodes: config.countries,
-		limit: config.limit,
-		viewbox: config.bbox,
-	};
+export function initMapKeyboardHandler(parent) {
+	parent.map.keyboard.keydown = function(e) {
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+
+		// Custom keys
+		switch(e.key) {
+		case "*":
+		case "5":
+			parent.moveCenter();
+			return;
+
+		case "PageUp":
+		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();
+			return;
+		}
 
-	return fetch(`https://nominatim.openstreetmap.org/search?${geocoderParamsToURLString(params)}&format=geojson&polygon_geojson=1&addressdetails=1`)
-		.then(res => res.json())
-		.then(res => {
-			const finalRes = { features: [] };
-			const listedNames = [];
-			res.features.forEach(f => {
-				if(!listedNames.includes(f.properties.display_name)) {
-					finalRes.features.push({
-						place_type: ["place"],
-						place_name: f.properties.display_name,
-						bounds: new maplibregl.LngLatBounds(f.bbox),
-					});
-					listedNames.push(f.properties.display_name);
-				}
-			});
-			return finalRes;
-		});
+		let zoomDir = 0;
+		let bearingDir = 0;
+		let pitchDir = 0;
+		let xDir = 0;
+		let yDir = 0;
+
+		switch (e.keyCode) {
+		case 61:
+		case 107:
+		case 171:
+		case 187:
+			zoomDir = 1;
+			break;
+
+		case 189:
+		case 109:
+		case 173:
+			zoomDir = -1;
+			break;
+
+		case 37:
+		case 100:
+			if (e.shiftKey) {
+				bearingDir = -1;
+			} else {
+				e.preventDefault();
+				xDir = -1;
+			}
+			break;
+
+		case 39:
+		case 102:
+			if (e.shiftKey) {
+				bearingDir = 1;
+			} else {
+				e.preventDefault();
+				xDir = 1;
+			}
+			break;
+
+		case 38:
+		case 104:
+			if (e.shiftKey) {
+				pitchDir = 1;
+			} else {
+				e.preventDefault();
+				yDir = -1;
+			}
+			break;
+
+		case 40:
+		case 98:
+			if (e.shiftKey) {
+				pitchDir = -1;
+			} else {
+				e.preventDefault();
+				yDir = 1;
+			}
+			break;
+
+		default:
+			return;
+		}
+
+		if (this._rotationDisabled) {
+			bearingDir = 0;
+			pitchDir = 0;
+		}
+
+		return {
+			cameraAnimation: (map) => {
+				const tr = this._tr;
+				map.easeTo({
+					duration: 300,
+					easeId: "keyboardHandler",
+					easing: t => t * (2-t),
+					zoom: zoomDir ? Math.round(tr.zoom) + zoomDir * (e.shiftKey ? 2 : 1) : tr.zoom,
+					bearing: tr.bearing + bearingDir * this._bearingStep,
+					pitch: tr.pitch + pitchDir * this._pitchStep,
+					offset: [-xDir * this._panStep, -yDir * this._panStep],
+					center: tr.center
+				}, {originalEvent: e});
+			}
+		};
+	}.bind(parent.map.keyboard);
 }
 
+const MAP_PARAMS_STORAGE = "pnx-map-parameters";
+
 /**
- * Base adresse nationale (FR) geocoder, ready to use for our Map
- * @param {object} config Configuration sent by MapLibre GL Geocoder, following the geocoderApi format ( https://github.com/maplibre/maplibre-gl-geocoder/blob/main/API.md#setgeocoderapi )
- * @returns {object} GeoJSON Feature collection in Carmen GeoJSON format
+ * Reads map parameters from localStorage
  * @private
  */
-export function forwardGeocodingBAN(config) {
-	// Transform parameters into BAN format
-	const params = { q: config.query, limit: config.limit };
-	if(typeof config.proximity === "string") {
-		const [lat, lon] = config.proximity.split(",").map(v => parseFloat(v.trim()));
-		params.lat = lat;
-		params.lon = lon;
+export function getMapParamsFromLocalStorage() {
+	const params = localStorage.getItem(MAP_PARAMS_STORAGE);
+	if(!params) { return {}; }
+	try {
+		return JSON.parse(params);
+	}
+	catch(e) {
+		console.warn("Can't read map parameters stored in localStorage", e);
+		return {};
 	}
+}
 
-	const toPlaceName = p => [p.name, p.district, p.city].filter(v => v).join(", ");
-	const placeTypeToZoom =  { "housenumber": 20, "street": 18, "locality": 15, "municipality": 12 };
-	
-	return fetch(`https://api-adresse.data.gouv.fr/search/?${geocoderParamsToURLString(params)}`)
-		.then(res => res.json())
-		.then(res => {
-			res.features = res.features.map(f => ({
-				place_type: ["place"],
-				place_name: toPlaceName(f.properties),
-				center: new maplibregl.LngLat(...f.geometry.coordinates),
-				zoom: placeTypeToZoom[f.properties.type],
-			}));
-			return res;
-		});
-}
+/**
+ * Save map parameters into localStorage.
+ * @private
+ */
+export function saveMapParamsToLocalStorage(map) {
+	// Save map state in localStorage
+	const save = () => localStorage.setItem(MAP_PARAMS_STORAGE, JSON.stringify({
+		center: Object.fromEntries(Object.entries(map.getCenter()).map(([k,v]) => ([k,v.toFixed(7)]))),
+		zoom: map.getZoom().toFixed(1),
+		background: map.getBackground(),
+		theme: map._mapFilters.theme
+	}));
+
+	// Add events to know when to rewrite info
+	map.on("background-changed", save);
+	map.on("filters-changed", save);
+	map.on("moveend", save);
+	map.on("zoomend", save);
+	map.on("dragend", save);
+	map.on("boxzoomend", save);
+}