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

package/docs/09_Develop.md

@@ -38,6 +38,22 @@ In order to offer a coherent overlay of widgets, we follow this general `z-index
 | Togglable menus                   |   130   |
 | Fullscreen loaders & popups       |   200   |
 
+### Parameters handling
+
+!!! note
+
+	This concerns only __Viewer__ component. Editor & Coverage Map read input parameters only from Web Components attributes.
+
+Viewer component can read parameters from 3 different sources:
+
+- Web Component __attributes__, passed through DOM
+- Browser __local storage__
+- __URL search__ parameters
+
+This allows a flexible way to interact with viewer for users. Prioritization of parameters is managed by [InitParameters class](./reference/utils/InitParameters.md), URL parameters coming first, then local storage, to fallback with Web component attributes (and eventually some hard-coded defaults).
+
+This means that, when developing, if you want to check if your attributes are well-defined, you may want to get rid of URL search parameters, as well as remove the `pnx-map-parameters` local storage item. Otherwise, they may not be read as they are lower priority than others.
+
 ## Testing
 
 We're trying to make Panoramax as reliable and secure as possible. To ensure this, we rely heavily on code testing. A variety of testing tools is made available:

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

@@ -79,6 +79,12 @@ This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.compone
 >
   <p slot="top-right">My custom text</p>
 </pnx-viewer>
+
+<!-- With map options -->
+<pnx-viewer
+  endpoint="https://panoramax.openstreetmap.fr/"
+  map="{'maxZoom': 15, 'background': 'aerial', 'raster': '...'}"
+/>
 ```
 <a name="Panoramax.components.core.Viewer+properties"></a>
 
@@ -92,8 +98,9 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| [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 class](../ui/MapMore.md/#Panoramax.components.ui.MapMore) |
-| [psv] | <code>object</code> |  | [Any option to pass to Photo component](../ui/Photo.md/#Panoramax.components.ui.Photo) as an object |
+| 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 ? |
 | [focus] | <code>string</code> | <code>&quot;pic&quot;</code> | The component showing up as main component (pic, map) |
 | [geocoder] | <code>string</code> | <code>&quot;nominatim&quot;</code> | The geocoder engine to use (nominatim, ban) |
@@ -104,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/docs/reference/components/ui/Map.md

@@ -45,6 +45,7 @@ It uses instead [`on`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/
 | [options] | <code>object</code> |  | The map options (any of [MapLibre GL settings](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/) or any supplementary option defined here) |
 | [options.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). |
 | [options.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. |
+| [options.attributionControl.customAttribution] | <code>string</code> |  | To override default map attribution. |
 
 **Example**  
 ```js

package/docs/tutorials/map_style.md

@@ -25,3 +25,15 @@ Note that we also support PMTiles (for a simpler tile hosting), so your style fi
   }'
 />
 ```
+
+And you can also customize the map attribution, especially if your style JSON doesn't contain any by default, for example:
+
+```html
+<pnx-viewer
+  endpoint="https://api.panoramax.xyz/api"
+  mapstyle="https://my.tiles.provider/basic.json"
+  map='{
+    "attributionControl": { "customAttribution": "&copy; IGN" }
+  }'
+/>
+```

package/docs/tutorials/migrate_v4.md

@@ -132,3 +132,7 @@ URL parameters are now managed in the URL _search_ part (everything after the `?
 ```urlencoded
 https://panoramax.ign.fr/?background=streets&focus=map&map=9/48.6659/2.3237&speed=250
 ```
+
+## 🪛 Initialization parameters
+
+Parameters passed to __Viewer__ are more finely read, they can come from Web Component itself (attributes), browser local storage or URL search parameters. URL ones are read first, then local storage, and finally component attributes. This can be misleading while you develop, [read more about this on Develop documentation](../09_Develop.md#parameters-handling).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.3-develop-d0806c5a",
+  "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

@@ -69,6 +69,12 @@ const MAP_MOVE_DELTA = 100;
  * >
  *   <p slot="top-right">My custom text</p>
  * </pnx-viewer>
+ * 
+ * <!-- With map options -->
+ * <pnx-viewer
+ *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   map="{'maxZoom': 15, 'background': 'aerial', 'raster': '...'}"
+ * />
  * ```
  */
 export default class Viewer extends Basic {
@@ -77,8 +83,9 @@ export default class Viewer extends Basic {
 	 * @memberof Panoramax.components.core.Viewer#
 	 * @mixes Panoramax.components.core.Basic#properties
 	 * @type {Object}
-	 * @property {boolean|object} [map=true] Should map be used (true/false), or an object with [any map option available in Map class](#Panoramax.components.ui.MapMore)
-	 * @property {object} [psv] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an 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 ?
 	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
 	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban)
@@ -89,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/menus/MapLegend.js

@@ -46,7 +46,7 @@ export default class MapLegend extends LitElement {
 					</pnx-link-button>
 				</div>
 			</div>
-			${mapAttrib ? html`${this._parent?._t.map.map_data}<br />${mapAttrib}` : nothing}
+			${mapAttrib && mapAttrib.innerHTML.length > 0 ? html`${this._parent?._t.map.map_data}<br />${mapAttrib}` : nothing}
 		`;
 	}
 }

package/src/components/ui/Map.js

@@ -17,20 +17,6 @@ import * as pmtiles from "pmtiles";
 maplibregl.workerClass = maplibreglWorker;
 maplibregl.addProtocol("pmtiles", new pmtiles.Protocol().tile);
 
-const MAPLIBRE_OPTIONS = [	// No "style" option as it's handled by combineStyles function
-	"antialias", "attributionControl", "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.
@@ -49,6 +35,7 @@ const filterMapLibreOptions = opts => Object.fromEntries(Object.entries(opts).fi
  * @param {object} [options] The map options (any of [MapLibre GL settings](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/) or any supplementary option defined here)
  * @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=streets] Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
+ * @param {string} [options.attributionControl.customAttribution] To override default map attribution.
  * @fires Panoramax.components.ui.Map#background-changed
  * @fires Panoramax.components.ui.Map#users-changed
  * @fires Panoramax.components.ui.Map#sequence-hover
@@ -77,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();
 
@@ -95,7 +82,7 @@ export default class Map extends maplibregl.Map {
 			this._options.background = this._options.background || "streets";
 		}
 
-		this._attribution = new maplibregl.AttributionControl({ compact: false });
+		this._attribution = new maplibregl.AttributionControl({ compact: false, ...options.attributionControl });
 		this.addControl(this._attribution);
 
 		this._initMapPosition();

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.
  * 
@@ -50,7 +68,6 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let map_zoom = urlMap?.zoom || browserMap?.zoom || componentMap.zoom;
 		let map_pitch = urlMap?.pitch || componentMap.pitch;
 		let map_bearing = urlMap?.bearing || componentMap.bearing;
-		console.log(componentMap);
 		
 		//  - Component only
 		let geocoder = componentAttrs.geocoder;
@@ -61,6 +78,8 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let lang = componentAttrs.lang;
 		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 };
+		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)) {