@panoramax/web-viewer 3.1.1 → 3.2.0-develop-8f79d734

package/src/viewer/Widgets.js

@@ -3,9 +3,10 @@ import { PSV_ANIM_DURATION, PSV_ZOOM_DELTA, PIC_MAX_STAY_DURATION } from "../Vie
 import {
 	createPanel, createGroup, fa, fat, createButton, disableButton,
 	createSearchBar, createExpandableButton, enableButton, enableCopyButton, closeOtherPanels,
-	createLinkCell, createTable, createHeader, createButtonSpan, createLabel
+	createLinkCell, createTable, createHeader, createButtonSpan, createLabel, showGrade,
+	showQualityScore,
 } from "../utils/Widgets";
-import { COLORS, isInIframe, getUserAccount } from "../utils/Utils";
+import { COLORS, isInIframe, getUserAccount, QUALITYSCORE_VALUES, getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES, QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_POND_RES, QUALITYSCORE_POND_GPS } from "../utils/Utils";
 import SwitchBig from "../img/switch_big.svg";
 import SwitchMini from "../img/switch_mini.svg";
 import BackgroundAerial from "../img/bg_aerial.jpg";
@@ -50,6 +51,8 @@ import { faCircleQuestion } from "@fortawesome/free-solid-svg-icons/faCircleQues
 import { faCommentDots } from "@fortawesome/free-solid-svg-icons/faCommentDots";
 import { faAt } from "@fortawesome/free-solid-svg-icons/faAt";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons/faPaperPlane";
+import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 
 
 /**
@@ -112,7 +115,8 @@ export default class Widgets {
 				this._initWidgetSearch();
 				this._initWidgetFilters(
 					this._viewer._api._endpoints.user_search !== null
-					&& this._viewer._api._endpoints.user_tiles !== null
+					&& this._viewer._api._endpoints.user_tiles !== null,
+					this._viewer.map && this._viewer.map._hasQualityScore()
 				);
 				this._initWidgetMapLayers();
 				this._listenMapFiltersChanges();
@@ -494,18 +498,30 @@ export default class Widgets {
 	
 		// Camera details
 		popupContent.push(createHeader("h4", `${fat(faCamera)} ${this._t.gvs.metadata_camera}`));
-		const focal = picMeta?.properties?.["pers:interior_orientation"]?.focal_length ? `${picMeta?.properties?.["pers:interior_orientation"]?.focal_length} mm` : "unknown";
+		const focal = picMeta?.properties?.["pers:interior_orientation"]?.focal_length ? `${picMeta?.properties?.["pers:interior_orientation"]?.focal_length} mm` : "❓";
+		let resmp = picMeta?.properties?.["pers:interior_orientation"]?.["sensor_array_dimensions"];
+		if(resmp) {
+			resmp = `${resmp[0]} x ${resmp[1]} px (${Math.floor(resmp[0] * resmp[1] / 1000000)} Mpx)`;
+		}
+		let pictype = this._t.gvs.picture_flat;
+		let picFov = picMeta?.properties?.["pers:interior_orientation"]?.["field_of_view"]; // Use raw value instead of horizontalFov to avoid default showing up
+		if(picFov !== null && picFov !== undefined) {
+			if(picFov === 360) { pictype = this._t.gvs.picture_360; }
+			else { pictype += ` (${picFov}°)`; }
+		}
+
 		const cameraData = [
-			{ section: this._t.gvs.metadata_camera_make, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_manufacturer },
-			{ section: this._t.gvs.metadata_camera_model, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_model },
-			{ section: this._t.gvs.metadata_camera_type, value: picMeta?.horizontalFov === 360 ? this._t.gvs.picture_360 : this._t.gvs.picture_flat },
+			{ section: this._t.gvs.metadata_camera_make, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_manufacturer || "❓" },
+			{ section: this._t.gvs.metadata_camera_model, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_model || "❓" },
+			{ section: this._t.gvs.metadata_camera_type, value: pictype },
+			{ section: this._t.gvs.metadata_camera_resolution, value: resmp || "❓" },
 			{ section: this._t.gvs.metadata_camera_focal_length, value: focal },
 		];
 		popupContent.push(createTable("gvs-table-light", cameraData));
 	
 		// Location details
 		popupContent.push(createHeader("h4", `${fat(faLocationDot)} ${this._t.gvs.metadata_location}`));
-		const orientation = picMeta?.properties?.["view:azimuth"] !== undefined ? `${picMeta.properties["view:azimuth"]}°` : "unknown";
+		const orientation = picMeta?.properties?.["view:azimuth"] !== undefined ? `${picMeta.properties["view:azimuth"]}°` : "❓";
 		const gpsPrecisionLabel = getGPSPrecision(picMeta);
 		const locationData = [
 			{ section: this._t.gvs.metadata_location_longitude, value: picMeta.gps[0] },
@@ -515,6 +531,28 @@ export default class Widgets {
 		];
 		popupContent.push(createTable("gvs-table-light", locationData));
 	
+		// Picture quality level
+		if(this._viewer?.map?._hasQualityScore()) {
+			popupContent.push(createHeader(
+				"h4",
+				`${fat(faMedal)} ${this._t.gvs.metadata_quality} <a href="https://docs.panoramax.fr/pictures-metadata/quality_score/" target="_blank" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle)}</a>`
+			));
+			const gpsGrade = getGrade(QUALITYSCORE_GPS_VALUES, picMeta?.properties?.["quality:horizontal_accuracy"]);
+			const resGrade = getGrade(
+				picMeta?.horizontalFov === 360 ? QUALITYSCORE_RES_360_VALUES : QUALITYSCORE_RES_FLAT_VALUES,
+				picMeta?.properties?.["panoramax:horizontal_pixel_density"]
+			);
+			// Note: score is also calculated in utils/map code
+			const generalGrade = Math.round((resGrade || 1) * QUALITYSCORE_POND_RES + (gpsGrade || 1) * QUALITYSCORE_POND_GPS);
+
+			const qualityData = [
+				{ section: this._t.gvs.metadata_quality_score, value: showQualityScore(generalGrade) },
+				{ section: this._t.gvs.metadata_quality_gps_score, value: showGrade(gpsGrade, this._t) },
+				{ section: this._t.gvs.metadata_quality_resolution_score, value: showGrade(resGrade, this._t) },
+			];
+			popupContent.push(createTable("gvs-table-light", qualityData));
+		}
+
 		// EXIF
 		if (picMeta.properties?.exif) {
 			const exifDetails = document.createElement("details");
@@ -829,6 +867,7 @@ export default class Widgets {
 					<option value="default">${this._t.gvs.map_theme_default}</option>
 					<option value="age">${this._t.gvs.map_theme_age}</option>
 					<option value="type">${this._t.gvs.map_theme_type}</option>
+					${this._viewer?.map?._hasQualityScore() ? "<option value=\"score\">"+this._t.gvs.map_theme_score+"</option>" : ""}
 				</select>
 			</div>
 			<div>
@@ -864,6 +903,9 @@ export default class Widgets {
 						${this._t.gvs.picture_flat}
 					</div>
 				</div>
+				<div id="gvs-map-theme-legend-score" class="gvs-map-theme-legend gvs-hidden">
+					${QUALITYSCORE_VALUES.map(pv => "<span class=\"gvs-qualityscore\" style=\"background-color: "+pv.color+";\">"+pv.label+"</span>").join("")}
+				</div>
 			</div>`;
 
 		// Map theme events
@@ -929,29 +971,32 @@ export default class Widgets {
 	 * This should be called only if map is enabled.
 	 * @private
 	 */
-	_initWidgetFilters(hasUserSearch) {
+	_initWidgetFilters(hasUserSearch, hasQualityScore) {
 		const btnFilter = createExpandableButton("gvs-filter", faSliders, this._t.gvs.filters, this);
 		const pnlFilter = createPanel(this, btnFilter, []);
 		pnlFilter.innerHTML = `
 			<form id="gvs-filter-form">
 				<div id="gvs-filter-zoomin">${fat(faTriangleExclamation)} ${this._t.gvs.filter_zoom_in}</div>
 				<h4>${fat(faCalendar)} ${this._t.gvs.filter_date}</h4>
+				<div class="gvs-input-shortcuts">
+					<button data-for="gvs-filter-date-from" data-value="${new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split("T")[0]}">${this._t.gvs.filter_date_1month}</button>
+					<button data-for="gvs-filter-date-from" data-value="${new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().split("T")[0]}">${this._t.gvs.filter_date_1year}</button>
+				</div>
 				<div class="gvs-input-group">
 					<input type="date" id="gvs-filter-date-from" />
 					${fat(faArrowRight)}
 					<input type="date" id="gvs-filter-date-end" />
 				</div>
 				<h4>${fat(faImage)} ${this._t.gvs.filter_picture}</h4>
-				<div class="gvs-input-group" style="justify-content: center;">
+				<div class="gvs-input-group gvs-checkbox-btns" style="justify-content: center;">
 					<input type="checkbox" id="gvs-filter-type-flat" name="flat" checked />
-					<label for="gvs-filter-type-flat" style="margin-right: 20px">${this._t.gvs.picture_flat}</label>
+					<label for="gvs-filter-type-flat">${fat(faImage)} ${this._t.gvs.picture_flat}</label>
 					<input type="checkbox" id="gvs-filter-type-360" name="360" checked />
-					<label for="gvs-filter-type-360">${this._t.gvs.picture_360}</label>
+					<label for="gvs-filter-type-360">${fat(faPanorama)} ${this._t.gvs.picture_360}</label>
 				</div>
-				<!--h4>${fat(faCamera)} ${this._t.gvs.filter_camera_model}</h4>
-				<div class="gvs-input-group" id="gvs-filter-model"></div-->
 			</form>
 		`;
+		const form = pnlFilter.children[0];
 		createGroup(
 			"gvs-widget-filter",
 			this._viewer.isWidthSmall() ? "main-top-right" : "main-top-left",
@@ -964,48 +1009,121 @@ export default class Widgets {
 			pnlFilter.style.width = `${this._viewer.container.offsetWidth - 70}px`;
 		}
 
+		// Create qualityscore filter
+		if(hasQualityScore) {
+			const title = document.createElement("h4");
+			title.innerHTML = `${fat(faMedal)} ${this._t.gvs.filter_qualityscore}`;
+			title.style.marginBottom = "3px";
+			form.appendChild(title);
+
+			const div = document.createElement("div");
+			div.id = "gvs-filter-qualityscore";
+			div.classList.add("gvs-input-group");
+
+			QUALITYSCORE_VALUES.forEach(pv => {
+				const input = document.createElement("input");
+				input.id = "gvs-filter-qualityscore-" + pv.label;
+				input.type = "checkbox";
+				input.name = "qualityscore";
+				input.value = pv.label;
+
+				const label = document.createElement("label");
+				label.setAttribute("for", input.id);
+				label.title = this._t.gvs.filter_qualityscore_help;
+				label.appendChild(document.createTextNode(pv.label));
+				label.style.backgroundColor = pv.color;
+
+				div.appendChild(input);
+				div.appendChild(label);
+			});
+
+			form.appendChild(div);
+		}
+
 		// Create search bar for users
 		if(hasUserSearch) {
-			const form = pnlFilter.querySelector("#gvs-filter-form");
-
 			const title = document.createElement("h4");
 			title.innerHTML = `${fat(faUser)} ${this._t.gvs.filter_user}`;
 			form.appendChild(title);
 
+			// Shortcut for my own pictures
+			const userAccount = getUserAccount();
+			let mypics;
+			if(userAccount) {
+				const shortcuts = document.createElement("div");
+				shortcuts.classList.add("gvs-input-shortcuts");
+				mypics = document.createElement("button");
+				mypics.appendChild(document.createTextNode(this._t.gvs.filter_user_mypics));
+				shortcuts.appendChild(mypics);
+				form.appendChild(shortcuts);
+			}
+
 			const input = document.createElement("div");
 			input.id = "gvs-filter-user";
 			input.classList.add("gvs-input-group");
 
-			const userSearch = createSearchBar(
+			let userSearch;
+			userSearch = createSearchBar(
 				"gvs-filter-search-user",
 				this._t.gvs.search_user,
-				q => this._viewer._api.searchUsers(q)
-					.then(data => ((data || [])
-						.map(f => ({
-							title: f.label,
-							data: f
-						}))
-					)),
-				d => this._viewer.map.setVisibleUsers(d ? [d.data.id] : ["geovisio"]),
+				q => {
+					userSearch.classList.remove("gvs-filter-active");
+					return this._viewer._api.searchUsers(q)
+						.then(data => ((data || [])
+							.map(f => ({
+								title: f.label,
+								data: f
+							}))
+						));
+				},
+				d => {
+					if(d) { userSearch.classList.add("gvs-filter-active"); }
+					else { userSearch.classList.remove("gvs-filter-active"); }
+					return this._viewer.map.setVisibleUsers(d ? [d.data.id] : ["geovisio"]);
+				},
 				this,
 				true
 			);
 			input.appendChild(userSearch);
 			form.appendChild(input);
+
+			// Trigger "my pictures" shortcut action
+			if(userAccount) {
+				mypics.addEventListener("click", () => {
+					const userInput = userSearch.querySelector("input");
+					if(userInput.value === userAccount.name) {
+						userSearch.resetSearch();
+					}
+					else {
+						userInput.goItem({ title: userAccount.name, data: { id: userAccount.id } });
+					}
+				});
+			}
 		}
 
-		// Create search bar for camera model
-		// TODO : implement when API is ready
-		// const cameraSearch = createSearchBar(
-		// 	"gvs-filter-camera-model",
-		// 	this._t.gvs.search,
-		// 	() => Promise.reject(),
-		// 	() => {},
-		//  this
-		// );
-		// document.getElementById("gvs-filter-model").appendChild(cameraSearch);
+		// Shortcuts
+		pnlFilter.querySelectorAll(".gvs-input-shortcuts button").forEach(btn => {
+			btn.addEventListener("click", () => {
+				const elem = document.getElementById(btn.getAttribute("data-for"));
+				const val = btn.getAttribute("data-value");
+				if(elem) {
+					if(elem.value !== val) { elem.value = val; }
+					else { elem.value = ""; }
+				}
+			});
+		});
 
-		const form = pnlFilter.children[0];
+		// Fields change events (for active highlighting)
+		const fMinDate = document.getElementById("gvs-filter-date-from");
+		const fMaxDate = document.getElementById("gvs-filter-date-end");
+		[fMinDate, fMaxDate].forEach(f => {
+			f.addEventListener("change", () => {
+				if(f.value) { f.classList.add("gvs-filter-active"); }
+				else { f.classList.remove("gvs-filter-active"); }
+			});
+		});
+
+		// Form update events
 		this._formDelay = null;
 
 		const onFormChange = () => {
@@ -1041,19 +1159,33 @@ export default class Widgets {
 		const fMaxDate = document.getElementById("gvs-filter-date-end");
 		const fTypeFlat = document.getElementById("gvs-filter-type-flat");
 		const fType360 = document.getElementById("gvs-filter-type-360");
-		// const fCamera = document.getElementById("gvs-filter-camera");
 		const fMapTheme = document.getElementById("gvs-map-theme");
 
 		let type = "";
 		if(fType360.checked && !fTypeFlat.checked) { type = "equirectangular"; }
 		if(!fType360.checked && fTypeFlat.checked) { type = "flat"; }
 
+		let qualityscore = [];
+		if(this._viewer?.map?._hasQualityScore()) {
+			const fScoreA = document.getElementById("gvs-filter-qualityscore-A");
+			const fScoreB = document.getElementById("gvs-filter-qualityscore-B");
+			const fScoreC = document.getElementById("gvs-filter-qualityscore-C");
+			const fScoreD = document.getElementById("gvs-filter-qualityscore-D");
+			const fScoreE = document.getElementById("gvs-filter-qualityscore-E");
+			if(fScoreA.checked) { qualityscore.push(5); }
+			if(fScoreB.checked) { qualityscore.push(4); }
+			if(fScoreC.checked) { qualityscore.push(3); }
+			if(fScoreD.checked) { qualityscore.push(2); }
+			if(fScoreE.checked) { qualityscore.push(1); }
+			if(qualityscore.length == 5) { qualityscore = []; }
+		}
+
 		const values = {
 			minDate: fMinDate.value,
 			maxDate: fMaxDate.value,
 			type,
-			// camera: fCamera.value,
 			theme: fMapTheme.value,
+			qualityscore,
 		};
 
 		this._viewer.setFilters(values);
@@ -1064,26 +1196,59 @@ export default class Widgets {
 	 * @private
 	 */
 	_listenMapFiltersChanges() {
+		const btnFilter = document.getElementById("gvs-filter");
 		const fMinDate = document.getElementById("gvs-filter-date-from");
 		const fMaxDate = document.getElementById("gvs-filter-date-end");
 		const fTypeFlat = document.getElementById("gvs-filter-type-flat");
 		const fType360 = document.getElementById("gvs-filter-type-360");
-		// const fCamera = document.getElementById("gvs-filter-camera");
 		const fMapTheme = document.getElementById("gvs-map-theme");
+		const fScoreA = document.getElementById("gvs-filter-qualityscore-A");
+		const fScoreB = document.getElementById("gvs-filter-qualityscore-B");
+		const fScoreC = document.getElementById("gvs-filter-qualityscore-C");
+		const fScoreD = document.getElementById("gvs-filter-qualityscore-D");
+		const fScoreE = document.getElementById("gvs-filter-qualityscore-E");
 
 		// Update widget based on programmatic filter changes
 		this._viewer.addEventListener("filters-changed", e => {
-			if(e.detail.minDate) { fMinDate.value = e.detail.minDate; }
-			if(e.detail.maxDate) { fMaxDate.value = e.detail.maxDate; }
-			// if(e.detail.camera) { fCamera.value = e.detail.camera; }
+			if(e.detail.minDate) {
+				fMinDate.value = e.detail.minDate;
+				fMinDate.classList.add("gvs-filter-active");
+			}
+			else { fMinDate.classList.remove("gvs-filter-active"); }
+			if(e.detail.maxDate) {
+				fMaxDate.value = e.detail.maxDate;
+				fMaxDate.classList.add("gvs-filter-active");
+			}
+			else { fMaxDate.classList.remove("gvs-filter-active"); }
 			if(e.detail.theme) { fMapTheme.value = e.detail.theme; }
 			if(e.detail.type) {
 				fType360.checked = ["", "equirectangular"].includes(e.detail.type);
 				fTypeFlat.checked = ["", "flat"].includes(e.detail.type);
 			}
+			if(e.detail.qualityscore) {
+				fScoreA.checked = e.detail.qualityscore.includes(5) && e.detail.qualityscore.length < 5;
+				fScoreB.checked = e.detail.qualityscore.includes(4) && e.detail.qualityscore.length < 5;
+				fScoreC.checked = e.detail.qualityscore.includes(3) && e.detail.qualityscore.length < 5;
+				fScoreD.checked = e.detail.qualityscore.includes(2) && e.detail.qualityscore.length < 5;
+				fScoreE.checked = e.detail.qualityscore.includes(1) && e.detail.qualityscore.length < 5;
+			}
+			let activeFilters = (
+				Object.keys(e.detail).filter(d => d && d !== "theme").length > 0
+				|| this._viewer.map.getVisibleUsers().filter(u => u !== "geovisio").length > 0
+			);
+			btnFilter.setActive(activeFilters);
 			this._onMapThemeChange();
 		});
 
+		// Listen to user visibility changes to switch the filter active icon
+		this._viewer.addEventListener("map:users-changed", e => {
+			let activeFilters = (
+				Object.keys(this._viewer._mapFilters).filter(d => d && d !== "theme").length > 0
+				|| e.detail.usersIds.filter(u => u !== "geovisio").length > 0
+			);
+			btnFilter.setActive(activeFilters);
+		});
+
 		// Show/hide zoom in warning when map zoom changes
 		const lblZoomIn = document.getElementById("gvs-filter-zoomin");
 		const changeLblZoomInDisplay = () => {

package/tests/Viewer.test.js

@@ -344,6 +344,7 @@ describe("setFilters", () => {
 			reloadLayersStyles: jest.fn(),
 			filterUserLayersContent: jest.fn(),
 			getVisibleUsers: () => ["geovisio"],
+			_hasGridStats: () => false,
 		};
 		v.dispatchEvent = jest.fn();
 		Date.prototype.getDate = () => 8;

package/tests/__snapshots__/Editor.test.js.snap

@@ -185,11 +185,7 @@ Object {
     "nextPic": undefined,
     "prevPic": undefined,
   },
-  "sphereCorrection": Object {
-    "pan": 0,
-    "roll": 0,
-    "tilt": 0,
-  },
+  "sphereCorrection": Object {},
 }
 `;
 

package/tests/components/__snapshots__/Photo.test.js.snap

@@ -104,11 +104,7 @@ Object {
     "nextPic": "ccf5f468-38b8-4b42-8d79-b97f5391e0a3",
     "prevPic": "127d9282-d082-46ca-bc09-4b0d8569dd2c",
   },
-  "sphereCorrection": Object {
-    "pan": 0,
-    "roll": 0,
-    "tilt": 0,
-  },
+  "sphereCorrection": Object {},
 }
 `;
 
@@ -177,11 +173,7 @@ Object {
     "nextPic": "ccf5f468-38b8-4b42-8d79-b97f5391e0a3",
     "prevPic": "127d9282-d082-46ca-bc09-4b0d8569dd2c",
   },
-  "sphereCorrection": Object {
-    "pan": 0,
-    "roll": 0,
-    "tilt": 0,
-  },
+  "sphereCorrection": Object {},
 }
 `;
 

package/tests/utils/Exif.test.js

@@ -19,22 +19,22 @@ describe("getExifFloat", () => {
 
 describe("getGPSPrecision", () => {
 	it.each([
-		[undefined, "unknown"],
-		[0.4, "ideal"],
-		[0.9, "excellent"],
-		[2.9, "good"],
-		[6.9, "moderate"],
-		[9.9, "fair"],
-		[20, "poor"],
-		["9/10", "excellent"],
-		["99/10", "fair"],
+		[undefined, "❓"],
+		[0.4, "0.4 m"],
+		[0.9, "0.9 m"],
+		[2.9, "2.9 m"],
+		[6.9, "6.9 m"],
+		[9.9, "9.9 m"],
+		[20, "20 m"],
+		["9/10", "0.9 m"],
+		["99/10", "9.9 m"],
 	])("handles GPSHPos %s > %s", (input, expected) => {
 		const p = { properties: { exif: { "Exif.GPSInfo.GPSHPositioningError": input, "Exif.GPSInfo.GPSDOP": input } } };
 		expect(Exif.getGPSPrecision(p)).toBe(expected);
 	});
 
 	it.each([
-		[undefined, "unknown"],
+		[undefined, "❓"],
 		[0.9, "ideal"],
 		[1.9, "excellent"],
 		[4.9, "good"],

package/tests/utils/Map.test.js

@@ -50,6 +50,14 @@ describe("getUserSourceId", () => {
 	});
 });
 
+describe("switchCoefValue", () => {
+	it("works", () => {
+		const l = {id: "bla", paint: { "circle-radius": ["bla", ["get", "coef"]]}, layout: {"circle-sort": "coef"}};
+		const res = Map.switchCoefValue(l, "coef_360");
+		expect(res).toEqual({id: "bla", paint: { "circle-radius": ["bla", ["get", "coef_360"]]}, layout: {"circle-sort": "coef_360"}})
+	});
+});
+
 describe("geocoderParamsToURLString", () => {
 	it("works", () => {
 		const p = { bla: "blorg", you: 1 };

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

@@ -3,6 +3,7 @@
 exports[`_loadMapStyles handles default user 1`] = `
 Object {
   "layers": Array [],
+  "metadata": Object {},
   "sources": Object {
     "geovisio": Object {
       "maxzoom": 15,
@@ -30,6 +31,7 @@ Object {
       "id": "provider_blo",
     },
   ],
+  "metadata": Object {},
   "sources": Object {
     "provider": Object {},
     "provider_bla": Object {},
@@ -46,6 +48,7 @@ Object {
       "id": "provlayer",
     },
   ],
+  "metadata": Object {},
   "name": "Provider",
   "sources": Object {
     "geovisio": Object {
@@ -69,6 +72,7 @@ Object {
       "id": "provlayer",
     },
   ],
+  "metadata": Object {},
   "name": "Provider",
   "sources": Object {
     "geovisio": Object {
@@ -88,6 +92,7 @@ Object {
 exports[`_loadMapStyles works if no background style set 1`] = `
 Object {
   "layers": Array [],
+  "metadata": Object {},
   "sources": Object {
     "geovisio": Object {
       "maxzoom": 15,

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

@@ -21,7 +21,7 @@ Array [
 ]
 `;
 
-exports[`createSearchBar works 1`] = `"<input type=\\"text\\" placeholder=\\"no res\\"><span class=\\"gvs-search-bar-icon\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"magnifying-glass\\" class=\\"svg-inline--fa fa-magnifying-glass\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\\"></path></svg></span><div id=\\"mysrch-panel\\" class=\\"gvs-panel gvs-widget-bg gvs-hidden gvs-search-bar-results\\"></div>"`;
+exports[`createSearchBar works 1`] = `"<input type=\\"text\\" placeholder=\\"no res\\" id=\\"mysrch-input\\"><span class=\\"gvs-search-bar-icon\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"magnifying-glass\\" class=\\"svg-inline--fa fa-magnifying-glass\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\\"></path></svg></span><div id=\\"mysrch-panel\\" class=\\"gvs-panel gvs-widget-bg gvs-hidden gvs-search-bar-results\\"></div>"`;
 
 exports[`fa works 1`] = `
 <svg