@panoramax/web-viewer 5.1.0-develop-e8b88add → 5.1.0-develop-876a76e8

package/build/esm/components/core/Basic.js

@@ -9,7 +9,7 @@ import BasicStyles from "./Basic.css" with { type: "css" };
 document.adoptedStyleSheets.push(AtkinsonStyles);
 document.adoptedStyleSheets.push(BasicStyles);
 
-const __COMMIT_HASH__ = "e8b88ad";
+const __COMMIT_HASH__ = "876a76e";
 const __PACKAGE_VERSION__ = "5.1.0";
 const __PACKAGE_ISSUES_URL__ = "https://gitlab.com/panoramax/clients/web-viewer/-/work_items";
 

package/build/esm/components/core/CoverageMap.js

@@ -168,6 +168,8 @@ export default class CoverageMap extends Basic {
 			if(features.length >= 0 && features[0] != null) {
 				this.map._attachPreviewToPictures({ features }, layer);
 			}
+		} else {
+			this.map._dropPreview();
 		}
 	}
 }

package/build/esm/components/ui/Map.js

@@ -24,6 +24,7 @@ maplibregl.addProtocol("panoras", new PanoraMapProtocol().tile());
 
 const MarkerBaseSVG = await fetch(new URL("../../img/marker.svg", import.meta.url).href).then(res => res.text());
 const MarkerSelectedSVG = await fetch(new URL("../../img/marker_blue.svg", import.meta.url).href).then(res => res.text());
+const MarkerPinSVG = await fetch(new URL("../../img/pin.svg", import.meta.url).href).then(res => res.text());
 
 
 /**
@@ -52,6 +53,7 @@ const MarkerSelectedSVG = await fetch(new URL("../../img/marker_blue.svg", impor
  * @param {object} [options.indoor] The indoor= MapLibre plugin options. This must be a JSON object following [IndoorEqual parameters](https://indoorequal.com/doc/maplibre-gl-indoorequal/api#parameters). Note that this is only available if [maplibre-gl-indoorequal](https://indoorequal.com/doc/maplibre-gl-indoorequal) plugin is loaded in your web page.
  * @param {string} [options.indoor.level] (only if indoor= plugin is enabled) The initial indoor level to display. Defaults to ground or disabled depending on indoor map availability. Do not use if visible=false.
  * @param {boolean} [options.indoor.visible=true] (only if indoor= plugin is enabled) The initial indoor visibility. Set to false to avoid data loading before user explicitly enables indoor through widgets. If set to false, you may not set any level option in component.
+ * @param {string} [options.preview=thumb] Change kind of preview for picture/sequence selection (thumb (default), marker, none)
  * @fires Panoramax.components.ui.Map#sequence-hover
  * @fires Panoramax.components.ui.Map#sequence-click
  * @fires Panoramax.components.ui.Map#picture-click
@@ -203,6 +205,7 @@ export default class Map extends maplibregl.Map {
 			delete this._picPopup._loading;
 			this._picPopup.remove();
 			this._picMarkerPreview.remove();
+			this._picPinMarker?.remove?.();
 		}
 	}
 
@@ -222,6 +225,7 @@ export default class Map extends maplibregl.Map {
 		delete this._picPopup;
 		delete this._picThumbUrl;
 		delete this._seqPictures;
+		delete this._picPinMarker;
 	}
 
 	/**
@@ -397,6 +401,7 @@ export default class Map extends maplibregl.Map {
 	 */
 	displayPictureMarker(lon, lat, heading, skipCenter = false, picId = null) {
 		this._picMarkerPreview.remove();
+		this._picPinMarker?.remove?.();
 
 		// Show marker corresponding to selection
 		if(lon !== undefined && lat !== undefined) {
@@ -496,8 +501,12 @@ export default class Map extends maplibregl.Map {
 	 */
 	_attachPreviewToPictures(e, from) {
 		let f = e.features.pop();
+		if(!f) {
+			this._picPinMarker?.remove?.();
+			return;
+		}
 		// eslint-disable-next-line eqeqeq
-		if(!f || f.properties.id == this._picPopup._picId) { return; }
+		else if(f.properties.id == this._picPopup._picId) { return; }
 
 		clearTimeout(this._picPreviewTimer);
 		clearTimeout(this._picDropPreviewTimer);
@@ -551,9 +560,28 @@ export default class Map extends maplibregl.Map {
 		 */
 
 		let thumbCoords = picPreview ? picPreview.geometry.coordinates : e.lngLat;
-		this._picPopup
-			.setLngLat(thumbCoords)
-			.addTo(this);
+		if(this._options.preview === "thumb") {
+			this._picPopup
+				.setLngLat(thumbCoords)
+				.addTo(this);
+		} else if(this._options.preview === "marker") {
+			// Only show if no marker preview showing up
+			if(!picPreview || picPreview.properties.heading === undefined) {
+				if(!this._picPinMarker) {
+					const imgsvg = svgToImg(MarkerPinSVG);
+					imgsvg.style.width = "40px";
+					// eslint-disable-next-line no-undef
+					this._picPinMarker = new maplibregl.Marker({
+						element: imgsvg,
+						anchor: "bottom",
+						offset: [0,10],
+					});
+				}
+				this._picPinMarker
+					.setLngLat(thumbCoords)
+					.addTo(this);
+			}
+		}
 
 		// Only show GIF loader if thumbnail is not in browser cache
 		if(!picPreview && !this._picThumbUrl[f.properties.id]) {
@@ -561,6 +589,8 @@ export default class Map extends maplibregl.Map {
 		}
 
 		const displayThumb = thumbUrl => {
+			if(this._options.preview !== "thumb") { return; }
+
 			if(this._picPopup._loading === f.properties.id) {
 				if(thumbUrl) {
 					let content = document.createElement("img");
@@ -609,6 +639,7 @@ export default class Map extends maplibregl.Map {
 			clearTimeout(this._picPreviewTimer);
 			this._picPreviewTimer = setTimeout(() => {
 				if(this._picPopup._loading !== f.properties.id) { return; }
+				if(this._options.preview !== "thumb") { return; }
 
 				// Hover on a single picture
 				if(picPreview) {

package/build/esm/components/ui/Photo.js

@@ -200,17 +200,22 @@ export default class Photo extends PSViewer {
 	 * @returns {Promise} Resolves on PSV node metadata
 	 * @memberof Panoramax.components.ui.Photo#
 	 */
-	async _getNodeFromAPI(picId) {
+	async _getNodeFromAPI(picId, forceFromLocalAPI = false) {
 		if(isNullId(picId)) { return BASE_PANORAMA_NODE; }
 
+		const api = forceFromLocalAPI ? this._parent.api : this._parent.getAPI();
 		const picApiResponse = await fetch(
-			this._parent.getAPI().getPictureMetadataUrl(picId, this._picturesSequences[picId]),
-			this._parent.getAPI()._getFetchOptions()
+			api.getPictureMetadataUrl(picId, this._picturesSequences[picId]),
+			api._getFetchOptions()
 		);
 		let metadata = await picApiResponse.json();
 
 		if(metadata.features) { metadata = metadata.features.pop(); }
 		if(!metadata || Object.keys(metadata).length === 0 || !picApiResponse.ok) {
+			if(this._parent.hasTwoAPIs?.() && !forceFromLocalAPI) {
+				console.log("Failed to find picture on metacatalog, check local API");
+				return await this._getNodeFromAPI(picId, true);
+			}
 			throw new Error("Picture with ID " + picId + " was not found");
 		}
 

package/build/esm/img/pin.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   xml:space="preserve"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs19"><linearGradient
+     y2="195.90816"
+     x2="212.88858"
+     y1="98.091812"
+     x1="382.31149"
+     gradientUnits="userSpaceOnUse"
+     id="SVGID_1_"
+     gradientTransform="matrix(4.4379641,0,0,4.4379641,-886.70524,-217.09784)"
+     spreadMethod="pad">
+		<stop
+   id="stop4"
+   style="stop-color:#8F2A85"
+   offset="0" />
+		<stop
+   id="stop6"
+   style="stop-color:#2570B6"
+   offset="1" />
+	</linearGradient><linearGradient
+     xlink:href="#SVGID_1_"
+     id="linearGradient27"
+     x1="30.55006"
+     y1="29.297422"
+     x2="17.272936"
+     y2="8.0495806"
+     gradientUnits="userSpaceOnUse"
+     gradientTransform="matrix(0.66910611,0,0,0.66910611,0,1.2499974)" /></defs>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<circle
+   style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.30813;stroke-linecap:square;stroke-linejoin:round;paint-order:markers stroke fill"
+   id="path3"
+   cx="15.999331"
+   cy="9.2110214"
+   r="4.1819134" /><path
+   d="m 24.381558,9.7115132 c 0,-4.6295451 -3.752348,-8.3818922 -8.382562,-8.3818922 -4.630214,0 -8.381892,3.7523471 -8.381892,8.3818922 0,6.6328488 8.381892,16.4479668 8.381892,16.4479668 0,0 8.382562,-9.849242 8.382562,-16.4479668 z M 11.865259,9.2110219 c 0,-2.2836592 1.851416,-4.1344067 4.134406,-4.1344067 2.28299,0 4.134407,1.8507475 4.134407,4.1344067 0,2.2836591 -1.851417,4.1344071 -4.134407,4.1344071 -2.28299,0 -4.134406,-1.850748 -4.134406,-4.1344071 z"
+   fill="#006df0"
+   id="path1"
+   style="fill:url(#linearGradient27);stroke-width:0.414563;stroke-dasharray:none" /><circle
+   cx="15.998996"
+   cy="9.2110214"
+   r="2.0327444"
+   fill="#006df0"
+   id="circle1"
+   style="fill:url(#SVGID_1_);stroke-width:0.414543" /><path
+   d="m 20.738275,20.743521 c -0.683158,0.9876 -1.324161,1.847402 -1.858108,2.537919 5.296644,0.318495 8.767967,1.461997 10.059341,2.312431 -1.512849,0.997637 -6.007903,2.400083 -12.939174,2.400083 -6.9306007,0 -11.4263246,-1.403115 -12.9391735,-2.400083 1.2913747,-0.850434 4.7600208,-1.993267 10.0513115,-2.311762 -0.535284,-0.690517 -1.176957,-1.54965 -1.860784,-2.53725 C 4.7339257,21.386532 0,23.314895 0,25.593202 0,28.396756 7.1641191,30.670379 16.000334,30.670379 24.837219,30.670379 32,28.398095 32,25.593202 32.0013,23.313557 27.262059,21.384524 20.738275,20.743521 Z"
+   fill="#006df0"
+   id="path2"
+   style="fill:#8f2a85;fill-opacity:1;stroke-width:0.414543" />
+</svg>

package/build/esm/utils/InitParameters.js

@@ -85,6 +85,7 @@ export default class InitParameters {
 		let map_basemaps = componentMap.basemaps;
 		let map_indoor = componentMap.indoor;
 		let map_attribution = componentMap.attributionControl;
+		let map_preview = componentMap.preview;
 		let map_others = filterMapLibreOptions(componentMap);
 		let keyboardShortcuts = componentAttrs["keyboard-shortcuts"];
 		let skipTagsMenuOpening = componentAttrs["skip-tags-menu-opening"];
@@ -131,6 +132,12 @@ export default class InitParameters {
 			// Related to https://gitlab.com/panoramax/clients/web-viewer/-/issues/347
 			console.error("Parameter annot can only be used in combination with 'picture'");
 		}
+		if(!["thumb", "marker", "none"].includes(map_preview)) {
+			if(map_preview && map_preview.length > 0) {
+				console.warn("Parameter map-options.preview is invalid, should be 'thumb', 'marker' or 'none'");
+			}
+			map_preview = "thumb";
+		}
 
 		// Put all attributes in appropriate container
 		this._parentInit = { map, fetchOptions, style, lang, endpoint };
@@ -163,6 +170,7 @@ export default class InitParameters {
 			indoor: map_indoor,
 			attributionControl: map_attribution,
 			basemaps: map_basemaps,
+			preview: map_preview,
 			...map_others
 		};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "5.1.0-develop-e8b88add",
+  "version": "5.1.0-develop-876a76e8",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",