@panoramax/web-viewer 4.1.0-develop-6d60695e → 4.1.0-develop-2b222b1c

package/src/utils/InitParameters.js

@@ -289,13 +289,34 @@ export function xyzParamToPSVPosition(str) {
  * @private
  */
 function xywhParamToPSVPosition(str, picmeta) {
-	const loc = (str || "").split(",");
+	let loc = (str || "").split(",");
 	if (loc.length === 4 && !loc.some(v => isNaN(v))) {
-		const size = picmeta?.properties?.["pers:interior_orientation"]?.sensor_array_dimensions;
+		let [ locX, locY, locW, locH ] = loc.map(v => parseFloat(v));
+		let basePanoData = picmeta.panorama.basePanoData;
+		if(typeof basePanoData === "function") {
+			const size = picmeta?.properties?.["pers:interior_orientation"]?.sensor_array_dimensions;
+			if(size && size.length == 2) { basePanoData = basePanoData({width: size[0], height: size[1]}); }
+			else { basePanoData = null; }
+		}
+
+		if(!basePanoData?.fullWidth || !basePanoData?.fullHeight) { return null; }
+
+		const croppedX = basePanoData?.croppedX || 0;
+		const croppedY = basePanoData?.croppedY || 0;
+
+		// Compute offset from texture center
+		const xOffsetPx = croppedX + locX + locW / 2 - basePanoData.fullWidth / 2;
+		const yOffsetPx = -(croppedY + locY + locH / 2 - basePanoData.fullHeight / 2);
+		const xOffsetPct = xOffsetPx / basePanoData.fullWidth;
+		const yOffsetPct = yOffsetPx / basePanoData.fullHeight;
+		const xSizePct = locW / basePanoData.fullWidth;
+		const ySizePct = locH / basePanoData.fullHeight;
+		const sizePct = (xSizePct + ySizePct) / 2;
+
 		const res = {
-			textureX: +loc[0] + loc[2] / 2,
-			textureY: +loc[1] + loc[3] / 2,
-			z: size && size.length == 2 ? (1 - (((loc[2] / size[0]) + (loc[3] / size[1])) / 2)) * 75 : null,
+			yaw: xOffsetPct * 2 * Math.PI,
+			pitch: yOffsetPct * Math.PI,
+			z: (1 - sizePct) * 100
 		};
 
 		return res;

package/src/utils/geocoder.js

@@ -1,6 +1,3 @@
-// DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
-import maplibregl from "!maplibre-gl";
-
 import { NominatimBaseUrl, AdresseDataGouvBaseURL } from "./services";
 
 const PLACETYPE_ZOOM =  {
@@ -58,7 +55,7 @@ export function forwardGeocodingNominatim(config) {
 					finalRes.features.push({
 						place_type: ["place"],
 						place_name: plname,
-						center: new maplibregl.LngLat(...f.geometry.coordinates),
+						center: f.geometry.coordinates,
 						zoom: PLACETYPE_ZOOM[f.properties?.geocoding?.type],
 					});
 					listedNames.push(plname);
@@ -195,7 +192,7 @@ export function forwardGeocodingStandard(config, endpoint) {
 					finalRes.features.push({
 						place_type: ["place"],
 						place_name: plname,
-						center: new maplibregl.LngLat(...f.geometry.coordinates),
+						center: f.geometry.coordinates,
 						zoom: PLACETYPE_ZOOM[f.properties.type],
 					});
 					listedNames.push(plname);

package/src/utils/index_photoviewer.js

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-unused-modules */
+
+// Lightweight export for PhotoViewer
+import * as i18n from "./i18n";
+import * as picture from "./picture";
+import * as semantics from "./semantics";
+import * as services from "./services";
+import * as utils from "./utils";
+import * as widgets from "./widgets";
+
+export { i18n, picture, semantics, services, utils, widgets };
+export {default as API} from "./API";
+export {default as PhotoAdapter} from "./PhotoAdapter";
+export {default as PresetsManager} from "./PresetsManager";
+export {default as URLHandler} from "./URLHandler";

package/src/utils/map.js

@@ -3,7 +3,6 @@ import { COLORS, QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_RES_360_VALUES, QUAL
 import { autoDetectLocale } from "./i18n";
 import { isNullId } from "./utils";
 
-export const DEFAULT_TILES = "https://panoramax.openstreetmap.fr/pmtiles/basic.json";
 export const RASTER_LAYER_ID = "pnx-aerial";
 
 export const TILES_PICTURES_ZOOM = 15;
@@ -62,6 +61,13 @@ export const VECTOR_STYLES = {
 	}
 };
 
+export const MAP_THEMES = {
+	DEFAULT: "default",
+	AGE: "age",
+	TYPE: "type",
+	SCORE: "score",
+};
+
 
 // See MapLibre docs for explanation of expressions magic: https://maplibre.org/maplibre-style-spec/expressions/
 const MAP_EXPR_QUALITYSCORE_RES_360  = ["case", ["has", "h_pixel_density"], ["step", ["get", "h_pixel_density"], ...QUALITYSCORE_RES_360_VALUES], 1];
@@ -362,6 +368,122 @@ export function getMissingLayerStyles(sources = {}, layers = []) {
 	return newLayers;
 }
 
+/**
+ * Get comprehensive values from map filters form
+ * @param {Element} mapFiltersMenu The MapFilters DOM Element
+ * @param {Element} mapThemeSelect The Map Theme select DOM Element
+ * @param {boolean} hasQualityScore Set to true if vector tiles embed quality score data
+ * @return {object} The map filters as JSON
+ */
+export function mapFiltersFormValues(mapFiltersMenu, mapThemeSelect, hasQualityScore) {
+	const fMinDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-from");
+	const fMaxDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-end");
+	const fTypes = mapFiltersMenu?.shadowRoot.querySelectorAll("input[name='pnx-filter-type']");
+
+	let type = "";
+	for(let fTypeId = 0 ; fTypeId < fTypes.length; fTypeId++) {
+		const fType = fTypes[fTypeId];
+		if(fType.checked) {
+			type = fType.value;
+			break;
+		}
+	}
+
+	let qualityscore = [];
+	if(hasQualityScore) {
+		const fScore = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-qualityscore");
+		qualityscore = (fScore?.grade || "").split(",").map(v => parseInt(v)).filter(v => !isNaN(v));
+		if(qualityscore.length == 5) { qualityscore = []; }
+	}
+
+	return {
+		minDate: fMinDate?.value,
+		maxDate: fMaxDate?.value,
+		pic_type: type,
+		theme: mapThemeSelect?.value,
+		qualityscore,
+	};
+}
+
+/**
+ * Transforms map filters into MapLibre-like JSON filters
+ * @param {object} filters Filters returned by MapFilters widgets
+ * @param {boolean} [hasGridStats=false] Set to true if vector tiles offer grid statistics
+ * @returns {object} Set of variables { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle }
+ */
+export function mapFiltersToLayersFilters(filters, hasGridStats = false) {
+	let mapFilters = {};
+	let mapSeqFilters = [];
+	let mapPicFilters = [];
+	let reloadMapStyle = false;
+
+	if(filters.minDate && filters.minDate !== "") {
+		mapFilters.minDate = filters.minDate;
+		mapSeqFilters.push([">=", ["get", "date"], filters.minDate]);
+		mapPicFilters.push([">=", ["get", "ts"], filters.minDate]);
+	}
+
+	if(filters.maxDate && filters.maxDate !== "") {
+		mapFilters.maxDate = filters.maxDate;
+		mapSeqFilters.push(["<=", ["get", "date"], filters.maxDate]);
+
+		// Get tomorrow date for pictures filtering
+		// (because ts is date+time, so comparing date only string would fail otherwise)
+		let d = new Date(filters.maxDate);
+		d.setDate(d.getDate() + 1);
+		d = d.toISOString().split("T")[0];
+		mapPicFilters.push(["<=", ["get", "ts"], d]);
+	}
+
+	if(filters.pic_type && filters.pic_type !== "") {
+		mapFilters.pic_type = filters.pic_type === "flat" ? "flat" : "equirectangular";
+		mapSeqFilters.push(["==", ["get", "type"], mapFilters.pic_type]);
+		mapPicFilters.push(["==", ["get", "type"], mapFilters.pic_type]);
+	}
+	if(hasGridStats) {
+		reloadMapStyle = true;
+	}
+
+	if(filters.camera && filters.camera !== "") {
+		mapFilters.camera = filters.camera;
+		// 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 } ];
+		mapSeqFilters.push([">=", ["get", "model"], lowModel, collator]);
+		mapSeqFilters.push(["<=", ["get", "model"], highModel, collator]);
+		mapPicFilters.push([">=", ["get", "model"], lowModel, collator]);
+		mapPicFilters.push(["<=", ["get", "model"], highModel, collator]);
+	}
+
+	if(filters.qualityscore && filters.qualityscore.length > 0) {
+		mapFilters.qualityscore = filters.qualityscore;
+		mapSeqFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", mapFilters.qualityscore]]);
+		mapPicFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", mapFilters.qualityscore]]);
+	}
+
+	if(filters.theme && Object.values(MAP_THEMES).includes(filters.theme)) {
+		mapFilters.theme = filters.theme;
+		reloadMapStyle = true;
+	}
+
+	if(mapSeqFilters.length == 0) { mapSeqFilters = null; }
+	else {
+		mapSeqFilters.unshift("all");
+	}
+
+	if(mapPicFilters.length == 0) { mapPicFilters = null; }
+	else {
+		mapPicFilters.unshift("all");
+		mapPicFilters = ["step", ["zoom"],
+			true,
+			TILES_PICTURES_ZOOM, mapPicFilters
+		];
+	}
+
+	return { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle };
+}
+
 /**
  * Get cleaned-up layer ID for a specific user.
  * @param {string} userId The user UUID (or "geovisio" for general layer)

package/src/utils/services.js

@@ -4,6 +4,14 @@
  */
 
 
+/**
+ * Default map background tiles
+ * @returns {string} The website URL
+ */
+export function MapTiles() {
+	return "https://panoramax.openstreetmap.fr/pmtiles/basic.json";
+}
+
 /**
  * Panoramax website URL
  * @returns {string} The website URL

package/tests/utils/__snapshots__/geocoder.test.js.snap

@@ -4,10 +4,10 @@ exports[`forwardGeocodingBAN works 1`] = `
 Object {
   "features": Array [
     Object {
-      "center": Object {
-        "lat": 47.8,
-        "lng": -1.7,
-      },
+      "center": Array [
+        2.290084,
+        49.897443,
+      ],
       "place_name": "8 Boulevard du Port, Amiens",
       "place_type": Array [
         "place",
@@ -22,10 +22,10 @@ exports[`forwardGeocodingNominatim works 1`] = `
 Object {
   "features": Array [
     Object {
-      "center": Object {
-        "lat": 47.8,
-        "lng": -1.7,
-      },
+      "center": Array [
+        2.3483915,
+        48.8534951,
+      ],
       "place_name": "Paris, Île-de-France",
       "place_type": Array [
         "place",