@panoramax/web-viewer 3.0.2-develop-a8ea8e60

package/src/Editor.js

@@ -0,0 +1,359 @@
+import "./Editor.css";
+import CoreView from "./components/CoreView";
+import Map from "./components/Map";
+import Photo from "./components/Photo";
+import BackgroundAerial from "./img/bg_aerial.jpg";
+import BackgroundStreets from "./img/bg_streets.jpg";
+import { linkMapAndPhoto, apiFeatureToPSVNode } from "./utils/Utils";
+import { VECTOR_STYLES } from "./utils/Map";
+import { SYSTEM as PSSystem } from "@photo-sphere-viewer/core";
+
+const LAYER_HEADING_ID = "sequence-headings";
+
+/**
+ * Editor allows to focus on a single sequence, and preview what you edits would look like.
+ * It shows both picture and map.
+ * 
+ * Note that you can use any of the [CoreView](#CoreView) class functions as well.
+ * 
+ * @param {string|Element} container The DOM element to create viewer into
+ * @param {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
+ * @param {object} [options] View options.
+ * @param {string} options.selectedSequence The ID of sequence to highlight on load. Must be always defined.
+ * @param {string} [options.selectedPicture] The ID of picture to highlight on load (defaults to none)
+ * @param {object} [options.fetchOptions=null] Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters))
+ * @param {object} [options.raster] The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition](https://maplibre.org/maplibre-style-spec/sources/#raster).
+ * @param {string} [options.background] Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
+ * @param {string|object} [options.style] The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-gl-js-docs/style-spec/), or a URL string pointing to one.
+ * 
+ * @property {Map} map The map widget
+ * @property {Photo} psv The photo widget
+ */
+export default class Editor extends CoreView {
+	constructor(container, endpoint, options = {}){
+		super(container, endpoint, Object.assign(options, { users: [] }));
+
+		// Check sequence ID is set
+		if(!this._selectedSeqId) { this._loader.dismiss({}, "No sequence is selected"); }
+
+		// Create sub-containers
+		this.psvContainer = document.createElement("div");
+		this.mapContainer = document.createElement("div");
+		this.container.appendChild(this.psvContainer);
+		this.container.appendChild(this.mapContainer);
+
+		// Init PSV
+		try {
+			this.psv = new Photo(this, this.psvContainer);
+			this.psv._myVTour.datasource.nodeResolver = this._getNode.bind(this);
+		}
+		catch(e) {
+			let err = !PSSystem.isWebGLSupported ? this._t.gvs.error_webgl : this._t.gvs.error_psv;
+			this._loader.dismiss(e, err);
+		}
+
+		// Init map
+		this._api.onceReady().then(() => {
+			try {
+				this.map = new Map(this, this.mapContainer, {
+					raster: options.raster,
+					background: options.background,
+					supplementaryStyle: this._createMapStyle(),
+				});
+				linkMapAndPhoto(this);
+				this._loadSequence();
+				this.map.once("load", () => {
+					this.map.setPaintProperty("geovisio_editor_sequences", "line-color", this.map._getLayerColorStyle("sequences"));
+					this.map.setPaintProperty("geovisio_editor_pictures", "circle-color", this.map._getLayerColorStyle("pictures"));
+					this.map.setLayoutProperty("geovisio_editor_sequences", "visibility", "visible");
+					this.map.setLayoutProperty("geovisio_editor_pictures", "visibility", "visible");
+					if(options.raster) { this._addMapBackgroundWidget(); }
+					this._bindPicturesEvents();
+				});
+
+				// Override picMarker setRotation for heading preview
+				const oldRot = this.map._picMarker.setRotation.bind(this.map._picMarker);
+				this.map._picMarker.setRotation = h => {
+					h = this._lastRelHeading === undefined ? h : h + this._lastRelHeading - this.psv.getPictureRelativeHeading();
+					return oldRot(h);
+				};
+			}
+			catch(e) {
+				this._loader.dismiss(e, this._t.gvs.error_psv);
+			}
+		});
+
+		// Events
+		this.addEventListener("select", this._onSelect.bind(this));
+	}
+
+	getClassName() {
+		return "Editor";
+	}
+
+	/**
+	 * Create style for GeoJSON sequence data.
+	 * @private
+	 */
+	_createMapStyle() {
+		return {
+			sources: {
+				geovisio_editor_sequences: {
+					type: "geojson",
+					data: {"type": "FeatureCollection", "features": [] }
+				}
+			},
+			layers: [
+				{
+					"id": "geovisio_editor_sequences",
+					"type": "line",
+					"source": "geovisio_editor_sequences",
+					"layout": {
+						...VECTOR_STYLES.SEQUENCES.layout
+					},
+					"paint": {
+						...VECTOR_STYLES.SEQUENCES.paint
+					},
+				},
+				{
+					"id": "geovisio_editor_pictures",
+					"type": "circle",
+					"source": "geovisio_editor_sequences",
+					"layout": {
+						...VECTOR_STYLES.PICTURES.layout
+					},
+					"paint": {
+						...VECTOR_STYLES.PICTURES.paint
+					},
+				}
+			]
+		};
+	}
+
+	/**
+	 * Creates events handlers on pictures layer
+	 * @private
+	 */
+	_bindPicturesEvents() {
+		// Pictures events
+		this.map.on("mousemove", "geovisio_editor_pictures", () => {
+			this.map.getCanvas().style.cursor = "pointer";
+		});
+
+		this.map.on("mouseleave", "geovisio_editor_pictures", () => {
+			this.map.getCanvas().style.cursor = "";
+		});
+
+		this.map.on("click", "geovisio_editor_pictures", this.map._onPictureClick.bind(this.map));
+	}
+
+	/**
+	 * Displays currently selected sequence on map
+	 * @private
+	 */
+	_loadSequence() {
+		return this._api.getSequenceItems(this._selectedSeqId).then(seq => {
+			// Create data source
+			this._sequenceData = seq.features;
+			this.map.getSource("geovisio_editor_sequences").setData({
+				"type": "FeatureCollection",
+				"features": [
+					{
+						"type": "Feature",
+						"properties": {
+							"id": this._selectedSeqId,
+						},
+						"geometry":
+						{
+							"type": "LineString",
+							"coordinates": seq.features.map(p => p.geometry.coordinates)
+						}
+					},
+					...seq.features.map(f => {
+						f.properties.id = f.id;
+						f.properties.sequences = [this._selectedSeqId];
+						return f;
+					})
+				]
+			});
+
+			const onMapLoad = () => {
+				// Select picture if any
+				if(this._selectedPicId) {
+					const pic = seq.features.find(p => p.id === this._selectedPicId);
+					if(pic) {
+						this.select(this._selectedSeqId, this._selectedPicId, true);
+						this.map.jumpTo({ center: pic.geometry.coordinates, zoom: 18 });
+					}
+					else {
+						console.log("Picture with ID", pic, "was not found");
+					}
+				}
+				// Show area of sequence otherwise
+				else {
+					const bbox = [
+						...seq.features[0].geometry.coordinates,
+						...seq.features[0].geometry.coordinates
+					];
+
+					for(let i=1; i < seq.features.length; i++) {
+						const c = seq.features[i].geometry.coordinates;
+						if(c[0] < bbox[0]) { bbox[0] = c[0]; }
+						if(c[1] < bbox[1]) { bbox[1] = c[1]; }
+						if(c[0] > bbox[2]) { bbox[2] = c[0]; }
+						if(c[1] > bbox[3]) { bbox[3] = c[1]; }
+					}
+
+					this.map.fitBounds(bbox, {animate: false});
+				}
+				this._loader.dismiss();
+			};
+
+			if(this.map.loaded()) { onMapLoad(); }
+			else { this.map.once("load", onMapLoad); }
+		}).catch(e => this._loader.dismiss(e, this._t.gvs.error_api));
+	}
+
+	/**
+	 * Get the PSV node for wanted picture.
+	 * 
+	 * @param {string} picId The picture ID
+	 * @returns The PSV node
+	 * @private
+	 */
+	_getNode(picId) {
+		const f = this._sequenceData.find(f => f.properties.id === picId);
+		const n = f ? apiFeatureToPSVNode(f, this._t, this._isInternetFast) : null;
+		if(n) { delete n.links; }
+		return n;
+	}
+
+	/**
+	 * Creates the widget to switch between aerial and streets imagery
+	 * @private
+	 */
+	_addMapBackgroundWidget() {
+		// Container
+		const pnlLayers = document.createElement("div");
+		pnlLayers.id = "gvs-map-bg";
+		pnlLayers.classList.add("gvs-panel", "gvs-widget-bg", "gvs-input-group");
+		const onBgChange = e => this.map.setBackground(e.target.value);
+
+		// Radio streets
+		const radioBgStreets = document.createElement("input");
+		radioBgStreets.id = "gvs-map-bg-streets";
+		radioBgStreets.setAttribute("type", "radio");
+		radioBgStreets.setAttribute("name", "gvs-map-bg");
+		radioBgStreets.setAttribute("value", "streets");
+		radioBgStreets.addEventListener("change", onBgChange);
+		pnlLayers.appendChild(radioBgStreets);
+
+		const labelBgStreets = document.createElement("label");
+		labelBgStreets.setAttribute("for", radioBgStreets.id);
+
+		const imgBgStreets = document.createElement("img");
+		imgBgStreets.src = BackgroundStreets;
+
+		labelBgStreets.appendChild(imgBgStreets);
+		labelBgStreets.appendChild(document.createTextNode(this._t.gvs.map_background_streets));
+		pnlLayers.appendChild(labelBgStreets);
+		
+		// Radio aerial
+		const radioBgAerial = document.createElement("input");
+		radioBgAerial.id = "gvs-map-bg-aerial";
+		radioBgAerial.setAttribute("type", "radio");
+		radioBgAerial.setAttribute("name", "gvs-map-bg");
+		radioBgAerial.setAttribute("value", "aerial");
+		radioBgAerial.addEventListener("change", onBgChange);
+		pnlLayers.appendChild(radioBgAerial);
+
+		const labelBgAerial = document.createElement("label");
+		labelBgAerial.setAttribute("for", radioBgAerial.id);
+
+		const imgBgAerial = document.createElement("img");
+		imgBgAerial.src = BackgroundAerial;
+
+		labelBgAerial.appendChild(imgBgAerial);
+		labelBgAerial.appendChild(document.createTextNode(this._t.gvs.map_background_aerial));
+		pnlLayers.appendChild(labelBgAerial);
+
+		this.mapContainer.appendChild(pnlLayers);
+
+		const onMapBgChange = bg => {
+			if(bg === "aerial") { radioBgAerial.checked = true; }
+			else { radioBgStreets.checked = true; }
+		};
+		this.addEventListener("map:background-changed", e => onMapBgChange(e.detail.background));
+		onMapBgChange(this.map.getBackground());
+	}
+
+	/**
+	 * Preview on map how the new relative heading would reflect on all pictures.
+	 * This doesn't change anything on API-side, it's just a preview.
+	 * 
+	 * @param {number} [relHeading] The new relative heading compared to sequence path. In degrees, between -180 and 180 (0 = front, -90 = left, 90 = right). Set to null to remove preview.
+	 */
+	previewSequenceHeadingChange(relHeading) {
+		const layerExists = this.map.getLayer(LAYER_HEADING_ID) !== undefined;
+		this.map._picMarkerPreview.remove();
+
+		// If no value set, remove layer
+		if(relHeading === undefined) {
+			delete this._lastRelHeading;
+			if(layerExists) {
+				this.map.setLayoutProperty(LAYER_HEADING_ID, "visibility", "none");
+			}
+			// Update selected picture marker
+			if(this._selectedPicId) {
+				this.map._picMarker.setRotation(this.psv.getXY().x);
+			}
+			return;
+		}
+
+		this._lastRelHeading = relHeading;
+
+		// Create preview layer
+		if(!layerExists) {
+			this.map.addLayer({
+				"id": LAYER_HEADING_ID,
+				"type": "symbol",
+				"source": "geovisio_editor_sequences",
+				"layout": {
+					"icon-image": "gvs-marker",
+					"icon-overlap": "always",
+					"icon-size": 0.8,
+				},
+			});
+		}
+
+		// Change heading
+		const currentRelHeading = - this.psv.getPictureRelativeHeading();
+		this.map.setLayoutProperty(LAYER_HEADING_ID, "visibility", "visible");
+		this.map.setLayoutProperty(
+			LAYER_HEADING_ID,
+			"icon-rotate",
+			["+", ["get", "view:azimuth"], currentRelHeading, relHeading ]
+		);
+
+		// Skip selected picture and linestring geom
+		const filters = [["==", ["geometry-type"], "Point"]];
+		if(this._selectedPicId) { filters.push(["!=", ["get", "id"], this._selectedPicId]); }
+		this.map.setFilter(LAYER_HEADING_ID, ["all", ...filters]);
+
+		// Update selected picture marker
+		if(this._selectedPicId) {
+			this.map._picMarker.setRotation(this.psv.getXY().x);
+		}
+	}
+
+	/**
+	 * Event handler for picture loading
+	 * @private
+	 */
+	_onSelect() {
+		// Update preview of heading change
+		if(this._lastRelHeading !== undefined) {
+			this.previewSequenceHeadingChange(this._lastRelHeading);
+		}
+	}
+}

package/src/StandaloneMap.js

@@ -0,0 +1,114 @@
+import CoreView from "./components/CoreView";
+import Map from "./components/Map";
+import { getUserLayerId } from "./utils/Map";
+import { NavigationControl } from "!maplibre-gl"; // DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
+
+/**
+ * The standalone map viewer allows to see STAC pictures data as a map.
+ * It only embeds a map (no 360° pictures viewer) with a minimal picture preview (thumbnail).
+ * 
+ * Note that you can use any of the [CoreView](#CoreView) class functions as well.
+ * 
+ * @param {string|Element} container The DOM element to create viewer into
+ * @param {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
+ * @param {object} [options] Map options. Various settings can be passed, either the ones defined here, or any of [MapLibre GL settings](https://maplibre.org/maplibre-gl-js-docs/api/map/#map-parameters).
+ * @param {string} [options.selectedSequence] The ID of sequence to highlight on load (defaults to none)
+ * @param {string} [options.selectedPicture] The ID of picture to highlight on load (defaults to none)
+ * @param {object} [options.fetchOptions=null] Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters))
+ * @param {number} [options.minZoom=0] The minimum zoom level of the map (0-24).
+ * @param {number} [options.maxZoom=24] The maximum zoom level of the map (0-24).
+ * @param {string|object} [options.style] The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-gl-js-docs/style-spec/), or a URL string pointing to one.
+ * @param {external:maplibre-gl.LngLatLike} [options.center=[0, 0]] The initial geographical centerpoint of the map. If `center` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `[0, 0]` Note: MapLibre GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON.
+ * @param {number} [options.zoom=0] The initial zoom level of the map. If `zoom` is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`.
+ * @param {external:maplibre-gl.LngLatBoundsLike} [options.bounds] The initial bounds of the map. If `bounds` is specified, it overrides `center` and `zoom` constructor options.
+ * @param {string[]} [options.users] The IDs of users whom data should appear on map (defaults to all)
+ * 
+ * @property {Map} map The map widget
+ */
+class StandaloneMap extends CoreView {
+	constructor(container, endpoint, options = {}) {
+		super(container, endpoint, options);
+
+		this.mapContainer = document.createElement("div");
+		this.container.appendChild(this.mapContainer);
+
+		// Init API
+		this._api.onceReady().then(() => this._initMap());
+
+		// Events handlers
+		this.addEventListener("map:picture-click", e => this.select(e.detail.seqId, e.detail.picId));
+		this.addEventListener("map:sequence-click", e => this.select(e.detail.seqId));
+		this.addEventListener("select", this._onSelect.bind(this));
+	}
+
+	getClassName() {
+		return "Map";
+	}
+
+	/**
+	 * Ends all form of life in this object.
+	 * 
+	 * This is useful for Single Page Applications (SPA), to remove various event listeners.
+	 */
+	destroy() {
+		super.destroy();
+
+		// Delete sub-components
+		this.map.destroy();
+		delete this.map;
+
+		// Clean-up DOM
+		this.mapContainer.remove();
+		this.container.innerHTML = "";
+		this.container.classList.remove(...[...this.container.classList].filter(c => c.startsWith("gvs")));
+	}
+
+	/**
+	 * Creates map object
+	 * @private
+	 */
+	_initMap() {
+		this._options.hash = true;
+
+		// Override to avoid display of pictures symbols
+		class MyMap extends Map {
+			_getLayerStyleProperties(layer) {
+				if(layer === "pictures_symbols") {
+					return { layout: { visibility: "none" } };
+				}
+				else {
+					return super._getLayerStyleProperties(layer);
+				}
+			}
+		}
+		
+		this.map = new MyMap(this, this.mapContainer, this._options);
+		this.map.addControl(new NavigationControl({ showCompass: false }));
+		this.map.on("load", () => {
+			this.map.reloadLayersStyles();
+			this._loader.dismiss();
+		});
+	}
+
+	/**
+	 * Select event handler
+	 * @private
+	 * @param {object} e Event details
+	 */
+	_onSelect(e) {
+		// Move thumbnail to match selected element
+		if(e.detail.picId || e.detail.seqId) {
+			const layer = e.detail.picId ? "pictures" : "sequences";
+			const features = this.map.queryRenderedFeatures({
+				layers: [...this.map._userLayers].map(l => getUserLayerId(l, layer)),
+				filter: ["==", ["get", "id"], e.detail.picId || e.detail.seqId]
+			});
+
+			if(features.length >= 0 && features[0] != null) {
+				this.map._attachPreviewToPictures({ features }, layer);
+			}
+		}
+	}
+}
+
+export default StandaloneMap;

package/src/Viewer.css

@@ -0,0 +1,203 @@
+/*
+ *  Sizing of elements
+ */
+
+/* Focused element */
+.gvs-viewer .gvs-main
+{
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.gvs-viewer .gvs-main {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Non-focused element */
+.gvs-viewer .gvs-mini
+{
+  position: absolute;
+  top: unset;
+  bottom: 10px;
+  left: 10px;
+  height: 30%;
+  min-height: 232px;
+  aspect-ratio: 1 / 1;
+  z-index: 1;
+}
+
+.gvs.gvs-viewer:not(.gvs-has-mini) .gvs-mini,
+.gvs.gvs-viewer.gvs-mini-hidden .gvs-mini {
+  display: none;
+}
+
+@container (max-width: 576px) {       /* Special rule for small containers */
+  .gvs-viewer .gvs-mini {
+    max-width: 166px;
+    max-height: 110px;
+    min-height: unset;
+    width: 50%;
+    height: 30%;
+  }
+}
+
+.gvs-viewer .gvs-map.maplibregl-map {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+}
+
+/* PSV fulfilling its parent */
+.gvs-viewer .gvs-psv,
+.gvs-viewer .gvs-popup {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+
+
+/*
+ * Styling
+ */
+
+
+/* Non-focused element */
+.gvs-viewer .gvs-mini,
+.gvs-viewer .gvs-mini .psv-container,
+.gvs-viewer .gvs-mini .gvs-map
+{
+  border-radius: 10px;
+}
+
+/* PSV under widgets */
+.gvs-viewer .psv-container {
+  z-index: 0;
+}
+
+/* No PSV loader */
+.gvs-viewer .psv-loader {
+  display: none;
+}
+
+/* Overlay under navbar */
+.gvs-viewer .psv-overlay {
+  z-index: 89;
+}
+
+/* Popup */
+.gvs-viewer .gvs-popup {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.1s;
+  z-index: 10;
+  visibility: visible;
+  opacity: 1;
+}
+
+.gvs-viewer .gvs-popup.gvs-hidden {
+  display: flex !important;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.gvs-viewer .gvs-popup-backdrop {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.85);
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 10;
+}
+
+.gvs-viewer .gvs-popup div.gvs-widget-bg {
+  max-width: 90%;
+  max-height: 90%;
+	position: absolute;
+	padding: 15px;
+	z-index: 10;
+	border-radius: 25px;
+  overflow-y: auto;
+}
+
+.gvs-viewer #gvs-popup-btn-close {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  width: 24px;
+  min-width: unset;
+  height: 24px;
+  border-radius: 12px;
+}
+
+.gvs-viewer .gvs-popup table {
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  width: 100%;
+}
+
+.gvs-viewer .gvs-popup thead {
+  background-color: var(--blue-pale);
+}
+
+.gvs-viewer .gvs-popup th[scope="row"] {
+  text-align: left;
+}
+
+.gvs-viewer .gvs-popup th, .gvs-popup td {
+  border: 1px solid var(--grey-semi-dark);
+  padding: 8px 10px;
+  max-width: 600px;
+}
+
+.gvs-viewer .gvs-popup .gvs-table-light th[scope="row"] {
+  width: 30%;
+}
+
+.gvs-viewer .gvs-popup .gvs-table-light th,
+.gvs-viewer .gvs-popup .gvs-table-light td {
+  border: none;
+  padding: 5px 10px;
+  text-align: left;
+}
+
+.gvs-viewer .gvs-popup .gvs-table-light .gvs-td-with-id {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.gvs-viewer .gvs-popup table:not(.gvs-table-light) td:last-of-type {
+  text-align: center;
+}
+
+.gvs-viewer .gvs-popup table:not(.gvs-table-light) tbody > tr:nth-of-type(even) {
+  background-color: var(--grey);
+}
+
+.gvs-viewer .gvs-popup details summary {
+  font-size: 1.0em;
+	line-height: 1.0em;
+	font-weight: 500;
+	margin: 15px 0;
+  cursor: pointer;
+}
+
+.gvs-viewer .gvs-popup details summary svg {
+	height: 18px;
+	vertical-align: sub;
+	margin-right: 2px;
+}
+
+.gvs-viewer .gvs-metadata-actions {
+  justify-content: center;
+  font-size: 0.9rem;
+}