@panoramax/web-viewer 4.0.3-develop-e6749fd4 → 4.0.3-develop-39c77140

package/docs/reference/components/ui/Map.md

@@ -20,6 +20,7 @@
     * [.displayPictureMarker(lon, lat, heading, [skipCenter])](#Panoramax.components.ui.Map+displayPictureMarker)
     * [.reloadLayersStyles()](#Panoramax.components.ui.Map+reloadLayersStyles)
     * [.addEventListener(type, listener)](#Panoramax.components.ui.Map+addEventListener)
+    * [.setVisibleUsers(visibleIds)](#Panoramax.components.ui.Map+setVisibleUsers)
     * ["ready"](#Panoramax.components.ui.Map+event_ready)
     * ["background-changed"](#Panoramax.components.ui.Map+event_background-changed)
     * ["users-changed"](#Panoramax.components.ui.Map+event_users-changed)
@@ -180,6 +181,17 @@ This is a binder to [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/
 | listener | <code>function</code> |  | The event handler |
 | [options.once] | <code>boolean</code> | <code>false</code> | Set to true to only listen to first event. |
 
+<a name="Panoramax.components.ui.Map+setVisibleUsers"></a>
+
+### map.setVisibleUsers(visibleIds)
+Make given user layers visible on map, and hide all others (if any)
+
+**Kind**: instance method of [<code>Map</code>](#Panoramax.components.ui.Map)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| visibleIds | <code>string</code> \| <code>Array.&lt;string&gt;</code> | The user layers IDs to display |
+
 <a name="Panoramax.components.ui.Map+event_ready"></a>
 
 ### "ready"

package/docs/reference/components/ui/MapMore.md

@@ -128,6 +128,7 @@ Wait for a given map layer to be really available.
 Make given user layers visible on map, and hide all others (if any)
 
 **Kind**: instance method of [<code>MapMore</code>](#Panoramax.components.ui.MapMore)  
+**Overrides**: [<code>setVisibleUsers</code>](Map.md/#Panoramax.components.ui.Map+setVisibleUsers)  
 
 | Param | Type | Description |
 | --- | --- | --- |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-e6749fd4",
+  "version": "4.0.3-develop-39c77140",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/ui/Map.js

@@ -379,6 +379,9 @@ export default class Map extends maplibregl.Map {
 			});
 		});
 
+		// Force style reload
+		this.reloadLayersStyles();
+
 		/**
 		 * Event for visible users changes
 		 *

package/src/components/ui/MapMore.js

@@ -198,32 +198,21 @@ export default class MapMore extends Map {
 		return s;
 	}
 
-	/**
-	 * Change the map filters
-	 * @param {object} filters Filtering values
-	 * @param {string} [filters.minDate] Start date for pictures (format YYYY-MM-DD)
-	 * @param {string} [filters.maxDate] End date for pictures (format YYYY-MM-DD)
-	 * @param {string} [filters.pic_type] Type of picture to keep (flat, equirectangular)
-	 * @param {string} [filters.camera] Camera make and model to keep
-	 * @param {string} [filters.theme] Map theme to use
-	 * @param {number[]} [filters.qualityscore] QualityScore values, as a list of 1 to 5 grades
-	 * @param {boolean} [skipZoomIn=false] If true, doesn't force zoom in to map level >= 7
-	 * @memberof Panoramax.components.core.MapMore#
-	 */
-	setFilters(filters, skipZoomIn = false) {
+	/** @private */
+	_mapFiltersToLayersFilters(filters) {
+		let mapFilters = {};
 		let mapSeqFilters = [];
 		let mapPicFilters = [];
 		let reloadMapStyle = false;
-		this._mapFilters = {};
 
 		if(filters.minDate && filters.minDate !== "") {
-			this._mapFilters.minDate = filters.minDate;
+			mapFilters.minDate = filters.minDate;
 			mapSeqFilters.push([">=", ["get", "date"], filters.minDate]);
 			mapPicFilters.push([">=", ["get", "ts"], filters.minDate]);
 		}
 
 		if(filters.maxDate && filters.maxDate !== "") {
-			this._mapFilters.maxDate = filters.maxDate;
+			mapFilters.maxDate = filters.maxDate;
 			mapSeqFilters.push(["<=", ["get", "date"], filters.maxDate]);
 
 			// Get tomorrow date for pictures filtering
@@ -235,16 +224,16 @@ export default class MapMore extends Map {
 		}
 
 		if(filters.pic_type && filters.pic_type !== "") {
-			this._mapFilters.pic_type = filters.pic_type === "flat" ? "flat" : "equirectangular";
-			mapSeqFilters.push(["==", ["get", "type"], this._mapFilters.pic_type]);
-			mapPicFilters.push(["==", ["get", "type"], this._mapFilters.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(this._hasGridStats()) {
 			reloadMapStyle = true;
 		}
 
 		if(filters.camera && filters.camera !== "") {
-			this._mapFilters.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";
@@ -256,13 +245,13 @@ export default class MapMore extends Map {
 		}
 
 		if(filters.qualityscore && filters.qualityscore.length > 0) {
-			this._mapFilters.qualityscore = filters.qualityscore;
-			mapSeqFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", this._mapFilters.qualityscore]]);
-			mapPicFilters.push(["in", MAP_EXPR_QUALITYSCORE, ["literal", this._mapFilters.qualityscore]]);
+			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)) {
-			this._mapFilters.theme = filters.theme;
+			mapFilters.theme = filters.theme;
 			reloadMapStyle = true;
 		}
 
@@ -280,6 +269,25 @@ export default class MapMore extends Map {
 			];
 		}
 
+		return { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle };
+	}
+
+	/**
+	 * Change the map filters
+	 * @param {object} filters Filtering values
+	 * @param {string} [filters.minDate] Start date for pictures (format YYYY-MM-DD)
+	 * @param {string} [filters.maxDate] End date for pictures (format YYYY-MM-DD)
+	 * @param {string} [filters.pic_type] Type of picture to keep (flat, equirectangular)
+	 * @param {string} [filters.camera] Camera make and model to keep
+	 * @param {string} [filters.theme] Map theme to use
+	 * @param {number[]} [filters.qualityscore] QualityScore values, as a list of 1 to 5 grades
+	 * @param {boolean} [skipZoomIn=false] If true, doesn't force zoom in to map level >= 7
+	 * @memberof Panoramax.components.core.MapMore#
+	 */
+	setFilters(filters, skipZoomIn = false) {
+		let { mapFilters, mapSeqFilters, mapPicFilters, reloadMapStyle } = this._mapFiltersToLayersFilters(filters);
+
+		this._mapFilters = mapFilters;
 		if(reloadMapStyle) {
 			this.reloadLayersStyles();
 		}
@@ -291,9 +299,10 @@ export default class MapMore extends Map {
 				7, mapSeqFilters
 			];
 		}
-		
+
 		this.filterUserLayersContent("sequences", mapSeqFilters);
 		this.filterUserLayersContent("pictures", mapPicFilters);
+
 		if(
 			!skipZoomIn
 			&& (
@@ -321,4 +330,31 @@ export default class MapMore extends Map {
 		 */
 		this.fire("filters-changed", Object.assign({}, this._mapFilters));
 	}
+
+	/**
+	 * Make given user layers visible on map, and hide all others (if any)
+	 * @memberof Panoramax.components.ui.Map#
+	 * @param {string|string[]} visibleIds The user layers IDs to display
+	 */
+	async setVisibleUsers(visibleIds = []) {
+		await super.setVisibleUsers(visibleIds);
+		
+		// Force reload of styles & filters
+		let { mapSeqFilters, mapPicFilters, reloadMapStyle } = this._mapFiltersToLayersFilters(this._mapFilters);
+
+		if(reloadMapStyle) {
+			this.reloadLayersStyles();
+		}
+
+		const allUsers = visibleIds.includes("geovisio");
+		if(mapSeqFilters && allUsers) {
+			mapSeqFilters = ["step", ["zoom"],
+				true,
+				7, mapSeqFilters
+			];
+		}
+
+		this.filterUserLayersContent("sequences", mapSeqFilters);
+		this.filterUserLayersContent("pictures", mapPicFilters);
+	}
 }

package/src/components/ui/Photo.js

@@ -953,7 +953,7 @@ export default class Photo extends PSViewer {
 		if(!visible) { this._myMarkers.clearMarkers(); }
 		else {
 			let annotations = meta.properties.annotations;
-			if(annotations.length === 0) { console.warn("No annotation available on picture", meta.id); }
+			if(annotations?.length === 0) { console.warn("No annotation available on picture", meta.id); }
 
 			const picBData = this.state.textureData.panoData?.baseData;
 

package/tests/components/ui/__snapshots__/Map.test.js.snap

@@ -736,5 +736,169 @@ Array [
     "visibility",
     "none",
   ],
+  Array [
+    "geovisio_blabla_pictures",
+    "circle-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_pictures",
+    "circle-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_blabla_pictures_symbols",
+    "icon-image",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "id",
+        ],
+        undefined,
+      ],
+      "",
+      Array [
+        "==",
+        Array [
+          "get",
+          "type",
+        ],
+        "equirectangular",
+      ],
+      "pnx-arrow-360",
+      "pnx-arrow-flat",
+    ],
+  ],
+  Array [
+    "geovisio_blabla_pictures_symbols",
+    "symbol-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_pictures_symbols",
+    "icon-image",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "id",
+        ],
+        undefined,
+      ],
+      "",
+      Array [
+        "==",
+        Array [
+          "get",
+          "type",
+        ],
+        "equirectangular",
+      ],
+      "pnx-arrow-360",
+      "pnx-arrow-flat",
+    ],
+  ],
+  Array [
+    "geovisio_pictures_symbols",
+    "symbol-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_blabla_sequences",
+    "line-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_blabla_sequences",
+    "line-cap",
+    "square",
+  ],
+  Array [
+    "geovisio_sequences",
+    "line-sort-key",
+    Array [
+      "case",
+      Array [
+        "==",
+        Array [
+          "get",
+          "hidden",
+        ],
+        true,
+      ],
+      90,
+      10,
+    ],
+  ],
+  Array [
+    "geovisio_sequences",
+    "line-cap",
+    "square",
+  ],
 ]
 `;