@panoramax/web-viewer 3.2.3-develop-eb68a0ea → 3.2.3-develop-e277ccb9

package/docs/reference/components/core/Basic.md

@@ -42,13 +42,13 @@ Component properties.
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
 | [picture] | <code>string</code> |  | The picture ID to display |
 | [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |
 | [fetchOptions] | <code>object</code> |  | 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)) |
 | [users] | <code>Array.&lt;string&gt;</code> | <code>[geovisio]</code> | List of users IDs to use for map display (defaults to general map, identified as "geovisio") |
 | [mapstyle] | <code>string</code> \| <code>object</code> |  | 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-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
 | [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
-| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
 
 <a name="Panoramax.components.core.Basic+onceReady"></a>
 

package/docs/reference/components/core/CoverageMap.md

@@ -16,7 +16,7 @@
 
 * [.CoverageMap](#Panoramax.components.core.CoverageMap) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)
     * [new CoverageMap()](#new_Panoramax.components.core.CoverageMap_new)
-    * [.properties](Basic.md/#Panoramax.components.core.Basic+properties) : <code>Object</code>
+    * [.properties](#Panoramax.components.core.CoverageMap+properties) : <code>Object</code>
     * [.onceReady()](Basic.md/#Panoramax.components.core.Basic+onceReady) ⇒ <code>Promise</code>
     * [.onceAPIReady()](Basic.md/#Panoramax.components.core.Basic+onceAPIReady) ⇒ <code>Promise</code>
     * [.getClassName()](Basic.md/#Panoramax.components.core.Basic+getClassName) ⇒ <code>string</code>
@@ -37,25 +37,29 @@ Coverage Map is a basic map showing Panoramax coverage.
 ```html
 <pnx-coverage-map
   endpoint="https://panoramax.openstreetmap.fr/"
+  map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'
 />
 ```
-<a name="Panoramax.components.core.Basic+properties"></a>
+<a name="Panoramax.components.core.CoverageMap+properties"></a>
 
 ### coverageMap.properties : <code>Object</code>
 Component properties.
 
-**Kind**: instance mixin of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Kind**: instance property of [<code>CoverageMap</code>](#Panoramax.components.core.CoverageMap)  
+**Mixes**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
+**Overrides**: [<code>properties</code>](Basic.md/#Panoramax.components.core.Basic+properties)  
 **Properties**
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
 | [picture] | <code>string</code> |  | The picture ID to display |
 | [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |
 | [fetchOptions] | <code>object</code> |  | 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)) |
 | [users] | <code>Array.&lt;string&gt;</code> | <code>[geovisio]</code> | List of users IDs to use for map display (defaults to general map, identified as "geovisio") |
 | [mapstyle] | <code>string</code> \| <code>object</code> |  | 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-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
 | [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
-| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
+| [map] | <code>object</code> |  | [Any map option available in Map class](../ui/Map.md/#Panoramax.components.ui.Map).<br />Example: `map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'` |
 
 <a name="Panoramax.components.core.Basic+onceReady"></a>
 

package/docs/reference/components/core/Editor.md

@@ -54,13 +54,13 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
 | [picture] | <code>string</code> |  | The picture ID to display |
 | [sequence] | <code>string</code> |  | The sequence ID of the picture displayed |
 | [fetchOptions] | <code>object</code> |  | 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)) |
 | [users] | <code>Array.&lt;string&gt;</code> | <code>[geovisio]</code> | List of users IDs to use for map display (defaults to general map, identified as "geovisio") |
 | [mapstyle] | <code>string</code> \| <code>object</code> |  | 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-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
 | [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
-| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
 | [raster] | <code>object</code> |  | 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). |
 | [background] | <code>string</code> | <code>&quot;streets&quot;</code> | Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street. |
 

package/docs/reference/components/core/Viewer.md

@@ -98,6 +98,7 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
 | [map] | <code>boolean</code> \| <code>object</code> | <code>true</code> | Should map be used (true/false), or an object with [any map option available in Map or MapMore class](../ui/MapMore.md/#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"` |
 | [psv] | <code>object</code> |  | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"` |
 | [url-parameters] | <code>string</code> | <code>true</code> | Should the component add and update URL query parameters to save viewer state ? |
@@ -110,7 +111,6 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 | [users] | <code>Array.&lt;string&gt;</code> | <code>[geovisio]</code> | List of users IDs to use for map display (defaults to general map, identified as "geovisio") |
 | [mapstyle] | <code>string</code> \| <code>object</code> |  | 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-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
 | [lang] | <code>string</code> |  | To override language used for labels. Defaults to using user's preferred languages. |
-| endpoint | <code>string</code> |  | URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md)) |
 
 <a name="Panoramax.components.core.Viewer+onceReady"></a>
 

package/package.json

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

package/src/components/core/Basic.js

@@ -33,13 +33,13 @@ export default class Basic extends LitElement {
 	 * @memberof Panoramax.components.core.Basic#
 	 * @type {Object}
 	 * @mixin
+	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
 	 * @property {string} [picture] The picture ID to display
 	 * @property {string} [sequence] The sequence ID of the picture displayed
 	 * @property {object} [fetchOptions] 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))
 	 * @property {string[]} [users=[geovisio]] List of users IDs to use for map display (defaults to general map, identified as "geovisio")
 	 * @property {string|object} [mapstyle] 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-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles.
 	 * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
-	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
 	 */
 	static properties = {
 		picture: {type: String, reflect: true},

package/src/components/core/CoverageMap.js

@@ -3,6 +3,7 @@ import Map from "../ui/Map";
 import { getUserLayerId } from "../../utils/map";
 import { NavigationControl } from "!maplibre-gl"; // DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
 import "./CoverageMap.css";
+import { default as InitParameters, alterMapState } from "../../utils/InitParameters";
 
 
 /**
@@ -20,16 +21,37 @@ import "./CoverageMap.css";
  * ```html
  * <pnx-coverage-map
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'
  * />
  * ```
  */
 export default class CoverageMap extends Basic {
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.core.CoverageMap#
+	 * @type {Object}
+	 * @mixes Panoramax.components.core.Basic#properties
+	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
+	 * @property {string} [picture] The picture ID to display
+	 * @property {string} [sequence] The sequence ID of the picture displayed
+	 * @property {object} [fetchOptions] 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))
+	 * @property {string[]} [users=[geovisio]] List of users IDs to use for map display (defaults to general map, identified as "geovisio")
+	 * @property {string|object} [mapstyle] 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-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles.
+	 * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
+	 * @property {object} [map] [Any map option available in Map class](#Panoramax.components.ui.Map).<br />Example: `map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'`
+	 */
+	static properties = {
+		map: {type: Object},
+		...Basic.properties
+	};
+
 	constructor() {
 		super();
 
 		this._mapContainer = document.createElement("div");
 		this.onceAPIReady().then(() => {
 			this.loader.setAttribute("value", 30);
+			this._initParams = new InitParameters(InitParameters.GetComponentProperties(CoverageMap, this));
 			this._initMap();
 		});
 
@@ -60,8 +82,6 @@ export default class CoverageMap extends Basic {
 	 * @private
 	 */
 	_initMap() {
-		const mapOptions = { hash: true };
-
 		// Override to avoid display of pictures symbols
 		class MyMap extends Map {
 			_getLayerStyleProperties(layer) {
@@ -74,10 +94,11 @@ export default class CoverageMap extends Basic {
 			}
 		}
 		
-		this.map = new MyMap(this, this._mapContainer, mapOptions);
+		this.map = new MyMap(this, this._mapContainer, Object.assign({}, this._initParams.getMapInit(), { hash: true }));
 		this.map.addControl(new NavigationControl({ showCompass: false }));
 		this.loader.setAttribute("value", 70);
 		this.map.waitForEnoughMapLoaded().then(() => {
+			alterMapState(this.map, this._initParams.getMapPostInit());
 			this.map.reloadLayersStyles();
 			this.loader.dismiss();
 		});

package/src/components/core/Editor.js

@@ -40,13 +40,13 @@ export default class Editor extends Basic {
 	 * @memberof Panoramax.components.core.Editor#
 	 * @mixes Panoramax.components.core.Basic#properties
 	 * @type {Object}
+	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
 	 * @property {string} [picture] The picture ID to display
 	 * @property {string} [sequence] The sequence ID of the picture displayed
 	 * @property {object} [fetchOptions] 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))
 	 * @property {string[]} [users=[geovisio]] List of users IDs to use for map display (defaults to general map, identified as "geovisio")
 	 * @property {string|object} [mapstyle] 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-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles.
 	 * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
-	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
 	 * @property {object} [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).
 	 * @property {string} [background=streets] Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
 	 */

package/src/components/core/Viewer.js

@@ -83,6 +83,7 @@ export default class Viewer extends Basic {
 	 * @memberof Panoramax.components.core.Viewer#
 	 * @mixes Panoramax.components.core.Basic#properties
 	 * @type {Object}
+	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
 	 * @property {boolean|object} [map=true] Should map be used (true/false), or an object with [any map option available in Map or MapMore class](#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"`
 	 * @property {object} [psv] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"`
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
@@ -95,7 +96,6 @@ export default class Viewer extends Basic {
 	 * @property {string[]} [users=[geovisio]] List of users IDs to use for map display (defaults to general map, identified as "geovisio")
 	 * @property {string|object} [mapstyle] 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-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles.
 	 * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
-	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
 	 */
 	static properties = {
 		map: {type: Object},

package/src/components/ui/Map.js

@@ -17,22 +17,6 @@ import * as pmtiles from "pmtiles";
 maplibregl.workerClass = maplibreglWorker;
 maplibregl.addProtocol("pmtiles", new pmtiles.Protocol().tile);
 
-// No "style" option as it's handled by combineStyles function
-//  and no "attributionControl" as its handled manually
-const MAPLIBRE_OPTIONS = [
-	"antialias", "bearing", "bearingSnap", "bounds",
-	"boxZoom", "center", "clickTolerance", "collectResourceTiming",
-	"cooperativeGestures", "crossSourceCollisions", "doubleClickZoom", "dragPan",
-	"dragRotate", "fadeDuration", "failIfMajorPerformanceCaveat", "fitBoundsOptions",
-	"hash", "interactive", "keyboard", "localIdeographFontFamily", "locale", "logoPosition",
-	"maplibreLogo", "maxBounds", "maxCanvasSize", "maxPitch", "maxTileCacheSize",
-	"maxTileCacheZoomLevels", "maxZoom", "minPitch", "minZoom", "pitch", "pitchWithRotate",
-	"pixelRatio", "preserveDrawingBuffer", "refreshExpiredTiles", "renderWorldCopies",
-	"scrollZoom", "touchPitch", "touchZoomRotate", "trackResize",
-	"transformCameraUpdate", "transformRequest", "validateStyle", "zoom"
-];
-const filterMapLibreOptions = opts => Object.fromEntries(Object.entries(opts).filter(([key]) => MAPLIBRE_OPTIONS.includes(key)));
-
 
 /**
  * Map is the component showing pictures and sequences geolocation.
@@ -80,7 +64,7 @@ export default class Map extends maplibregl.Map {
 			transformRequest: parent.api._getMapRequestTransform(),
 			locale: parent._t.maplibre,
 			hash: false,
-			...filterMapLibreOptions(options)
+			...options
 		});
 		this._loadMarkerImages();
 

package/src/utils/InitParameters.js

@@ -10,6 +10,24 @@ export const MAP_FILTERS_JS2URL = {
 const MAP_FILTERS_URL2JS = Object.fromEntries(Object.entries(MAP_FILTERS_JS2URL).map(v => [v[1], v[0]]));
 const MAP_NONE = ["none", "null", "false", false];
 
+const MAPLIBRE_OPTIONS = [
+	"antialias", "bearing", "bearingSnap", "bounds",
+	"boxZoom", "clickTolerance", "collectResourceTiming",
+	"cooperativeGestures", "crossSourceCollisions", "doubleClickZoom", "dragPan",
+	"dragRotate", "fadeDuration", "failIfMajorPerformanceCaveat", "fitBoundsOptions",
+	"hash", "interactive", "keyboard", "localIdeographFontFamily", "locale", "logoPosition",
+	"maplibreLogo", "maxBounds", "maxCanvasSize", "maxPitch", "maxTileCacheSize",
+	"maxTileCacheZoomLevels", "maxZoom", "minPitch", "minZoom", "pitch", "pitchWithRotate",
+	"pixelRatio", "preserveDrawingBuffer", "refreshExpiredTiles", "renderWorldCopies",
+	"scrollZoom", "touchPitch", "touchZoomRotate", "trackResize",
+	"transformCameraUpdate", "transformRequest", "validateStyle"
+];
+
+function filterMapLibreOptions(opts) {
+	return Object.fromEntries(Object.entries(opts).filter(([key]) => MAPLIBRE_OPTIONS.includes(key)));
+}
+
+
 /**
  * Merges all URL parameters and component attributes into a single set of coherent settings.
  * 
@@ -61,6 +79,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let endpoint = componentAttrs.endpoint;
 		let map_raster = componentMap.raster;
 		let map_attribution = componentMap.attributionControl;
+		let map_others = filterMapLibreOptions(componentMap);
 
 		//  - URL only
 		let psv_xyz = urlParams.xyz;
@@ -102,7 +121,11 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		};
 		this._psvPostInit = { xyz: psv_xyz };
 
-		this._mapInit = { raster: map_raster, attributionControl: map_attribution };
+		this._mapInit = {
+			raster: map_raster,
+			attributionControl: map_attribution,
+			...map_others
+		};
 		this._mapAny = {
 			theme: map_theme,
 			background: map_background,
@@ -311,7 +334,7 @@ export function alterMapState(map, params) {
 	map.setVisibleUsers(vu);
 
 	// Change map filters
-	map.setFilters(paramsToMapFilters(params));
+	map.setFilters?.(paramsToMapFilters(params));
 
 	// Change map background
 	if(["aerial", "streets"].includes(params.background)) {