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

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/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,8 @@ 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 |
+| [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) |

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-eb68a0ea",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

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,8 @@ 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 {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)

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,8 +17,10 @@ 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",
+// 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",
@@ -49,6 +51,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
@@ -95,7 +98,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

@@ -50,7 +50,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 +60,7 @@ 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;
 
 		//  - URL only
 		let psv_xyz = urlParams.xyz;
@@ -102,7 +102,7 @@ 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 };
 		this._mapAny = {
 			theme: map_theme,
 			background: map_background,