@panoramax/web-viewer 3.2.3-develop-d3aad6f3 → 3.2.3-develop-6a0bb22d

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

@@ -46,7 +46,7 @@ Component properties.
 | [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") |
-| [style] | <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-gl-js-docs/style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
+| [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-gl-js-docs/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)) |
 

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

@@ -53,7 +53,7 @@ Component properties.
 | [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") |
-| [style] | <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-gl-js-docs/style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles. |
+| [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-gl-js-docs/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)) |
 

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

@@ -54,6 +54,13 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| [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-gl-js-docs/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,13 @@ Component properties. All of [Basic properties](Basic.md/#Panoramax.components.c
 | [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) |
 | [widgets] | <code>string</code> | <code>true</code> | Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like. |
+| [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-gl-js-docs/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/tutorials/map_style.md

@@ -1,11 +1,11 @@
 # Change map background style
 
-All components can be configured to use a different map background than the default one. By default, an OpenStreetMap France classic style if offered. Changing the style is done by passing a `style` parameter on viewer setup. It should follow the [MapLibre Style specification](https://maplibre.org/maplibre-style-spec) and be passed as an object, or an URL to such style:
+All components can be configured to use a different map background than the default one. By default, an OpenStreetMap France classic style if offered. Changing the style is done by passing a `mapstyle` parameter on viewer setup. It should follow the [MapLibre Style specification](https://maplibre.org/maplibre-style-spec) and be passed as an object, or an URL to such style:
 
 ```html
 <pnx-viewer
   endpoint="https://api.panoramax.xyz/api"
-  style="https://my.tiles.provider/basic.json"
+  mapstyle="https://my.tiles.provider/basic.json"
 />
 ```
 
@@ -14,7 +14,7 @@ Note that we also support PMTiles (for a simpler tile hosting), so your style fi
 ```html
 <pnx-viewer
   endpoint="https://api.panoramax.xyz/api"
-  style='{
+  mapstyle='{
     "sources": {
       "protomaps": {
           "type": "vector",

package/docs/tutorials/migrate_v4.md

@@ -24,6 +24,8 @@ The way you create a component (viewer, editor, coverage map) is different :
 	let myviewer = document.getElementById("myviewer");
 	```
 
+	Also note that custom MapLibre style must be passed as `mapstyle` attribute.
+
 === "v3"
 
 	Before, you created a `div` with ID, then passed it to JS class.
@@ -32,6 +34,8 @@ The way you create a component (viewer, editor, coverage map) is different :
 	let myViewer = new Panoramax.Viewer("viewer", "https://api.panoramax.xyz/api");
 	```
 
+	And MapLibre style was passed as a `style` property in option object.
+
 ## ⏯️ Widgets options
 
 Viewer widgets options are managed quite differently in version 4:

package/package.json

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

package/src/components/core/Basic.js

@@ -37,7 +37,7 @@ export default class Basic extends LitElement {
 	 * @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} [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. Defaults to OSM vector tiles.
+	 * @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-gl-js-docs/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))
 	 */
@@ -46,7 +46,7 @@ export default class Basic extends LitElement {
 		sequence: {type: String, reflect: true},
 		fetchOptions: {type: Object, attribute: false},
 		users: {type: Array, reflect: true},
-		style: {type: Object},
+		mapstyle: {type: String},
 		lang: {type: String},
 		endpoint: {type: String},
 	};
@@ -56,7 +56,7 @@ export default class Basic extends LitElement {
 
 		// Some defaults
 		this.users = ["geovisio"];
-		this.style = DEFAULT_TILES;
+		this.mapstyle = this.getAttribute("mapstyle") || DEFAULT_TILES;
 		this.lang = this.getAttribute("lang") || null;
 		this.endpoint = this.getAttribute("endpoint") || null; // No default
 		this.picture = null;
@@ -78,15 +78,18 @@ export default class Basic extends LitElement {
 		// Internet speed check
 		this._isInternetFast = null;
 		isInternetFast().then(isFast => this._isInternetFast = isFast);
+	}
 
-		if(this.endpoint) { this._setupAPI(this.endpoint); }
+	connectedCallback() {
+		super.connectedCallback();
+		if(this.endpoint) { this._setupAPI(); }
 	}
 
 	/**
 	 * Creates API and wait for initial loading
 	 * @private
 	 */
-	_setupAPI(endpoint) {
+	_setupAPI() {
 		// Loader init
 		this.loader = this.loader || createWebComp("pnx-loader", {_parent: this});
 
@@ -95,12 +98,17 @@ export default class Basic extends LitElement {
 			return;
 		}
 
-		// API init)
+		// Check if mapstyle is not a unparsed JSON
+		try {
+			this.mapstyle = JSON.parse(this.mapstyle);
+		} catch(e) { /* empty */ }
+		
+		// API init
 		try {
-			this.api = new API(endpoint, {
+			this.api = new API(this.endpoint, {
 				users: this.users,
 				fetch: this.fetchOptions,
-				style: this.style,
+				style: this.mapstyle,
 			});
 			this.api.onceReady()
 				.then(() => {
@@ -165,7 +173,7 @@ export default class Basic extends LitElement {
 		super.attributeChangedCallback(name, _old, value);
 		
 		if(name === "endpoint") {
-			if(!this.api || this.api._endpoint !== value) { this._setupAPI(value); }
+			if(!this.api || this.api._endpoint !== value) { this._setupAPI(); }
 		}
 		if(["picture", "sequence"].includes(name)) {
 			let seqId, picId, prevSeqId, prevPicId;

package/src/components/core/Editor.js

@@ -40,6 +40,13 @@ export default class Editor extends Basic {
 	 * @memberof Panoramax.components.core.Editor#
 	 * @mixes Panoramax.components.core.Basic#properties
 	 * @type {Object}
+	 * @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-gl-js-docs/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,13 @@ export default class Viewer extends Basic {
 	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
 	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban)
 	 * @property {string} [widgets=true] Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
+	 * @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-gl-js-docs/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},
@@ -157,8 +164,8 @@ export default class Viewer extends Basic {
 			// Init various widgets
 			if(myInitParams.widgets !== "false") {
 				this.grid.appendChild(createWebComp("pnx-widget-zoom", {
-					slot: this.isHeightSmall() ? "top-left" : "bottom-right",
-					class: this.isHeightSmall() ? "pnx-only-map pnx-print-hidden" : "pnx-print-hidden",
+					slot: this.isWidthSmall() ? "top-left" : "bottom-right",
+					class: this.isWidthSmall() ? "pnx-only-map pnx-print-hidden" : "pnx-print-hidden",
 					_parent: this
 				}));
 				this.grid.appendChild(createWebComp("pnx-widget-share", {slot: "bottom-right", class: "pnx-print-hidden", _parent: this}));

package/src/components/menus/Share.js

@@ -73,6 +73,7 @@ export default class ShareMenu extends LitElement {
 	constructor() {
 		super();
 		this._josm = false;
+		this._onUrlChange();
 	}
 
 	/** @private */