@panoramax/web-viewer 3.2.3-develop-17bc8da1 → 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-17bc8da1",
+  "version": "3.2.3-develop-6a0bb22d",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -89,6 +89,7 @@
     "workbox-webpack-plugin": "^6.5.4"
   },
   "dependencies": {
+    "@fontsource/atkinson-hyperlegible-next": "^5.2.2",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",

package/src/components/core/Basic.css

@@ -1,5 +1,5 @@
 /* Colors */
-:root {
+:root, :host {
 	--white: #ffffff;
 	--black: #181818;
 	--black-pale: #1b1a17;
@@ -31,6 +31,7 @@
 	--widget-font: var(--grey-dark);
 	--widget-font-active: var(--white);
 	--widget-font-direct: var(--blue);
+	--font-family: "Atkinson Hyperlegible Next", sans-serif;
 }
 
 .pnx-hidden { display: none !important; }

package/src/components/core/Basic.js

@@ -5,6 +5,7 @@ import { DEFAULT_TILES } from "../../utils/map";
 import { createWebComp } from "../../utils/widgets";
 import { isInIframe, isInternetFast } from "../../utils/utils";
 import PACKAGE_JSON from "../../../package.json";
+import "@fontsource/atkinson-hyperlegible-next";
 import "./Basic.css";
 
 /**
@@ -36,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))
 	 */
@@ -45,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},
 	};
@@ -55,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;
@@ -77,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});
 
@@ -94,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(() => {
@@ -164,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/MapFilters.js

@@ -48,7 +48,7 @@ export default class MapFilters extends LitElement {
 			z-index: 131;
 			background-color: rgba(255,255,255,0.8);
 			text-align: center;
-			font-weight: bold;
+			font-weight: 800;
 			position: absolute;
 			top: 0;
 			right: 0;
@@ -80,6 +80,7 @@ export default class MapFilters extends LitElement {
 			color: var(--widget-font);
 			border: 1px solid var(--widget-border-div);
 			border-radius: 20px;
+			font-family: var(--font-family);
 		}
 
 		/* Input shortcuts */
@@ -91,13 +92,14 @@ export default class MapFilters extends LitElement {
 			border: none;
 			height: 20px;
 			line-height: 20px;
-			font-size: 11px;
+			font-size: 0.8em;
 			padding: 0 8px;
 			vertical-align: middle;
 			background-color: var(--grey-pale);
 			color: var(--black);
 			border-radius: 10px;
 			cursor: pointer;
+			font-family: var(--font-family);
 		}
 		.pnx-input-shortcuts button:hover {
 			background-color: #d9dcd9;

package/src/components/menus/MapLegend.js

@@ -17,7 +17,7 @@ export default class MapLegend extends LitElement {
 	/** @private */
 	static styles = css`
 		:host {
-			font-size: 0.8em;
+			font-size: 0.9em;
 		}
 		small {
 			font-size: 1em;

package/src/components/menus/PictureLegend.js

@@ -30,7 +30,7 @@ export default class PictureLegend extends LitElement {
 		}
 
 		.context {
-			font-size: 0.8em;
+			font-size: 0.9em;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;

package/src/components/menus/PlayerOptions.js

@@ -84,7 +84,6 @@ export default class PlayerOptions extends LitElement {
 				id="pnx-player-contrast"
 				title="${this._parent?._t.pnx.contrast}"
 				kind="outline"
-				style="width: 26px;"
 				@click=${this._onContrastClick}
 			>
 				${fa(faLightbulb)}

package/src/components/menus/Share.js

@@ -73,15 +73,19 @@ export default class ShareMenu extends LitElement {
 	constructor() {
 		super();
 		this._josm = false;
+		this._onUrlChange();
 	}
 
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._onUrlChange();
-		this._parent?.addEventListener("ready", this._onUrlChange.bind(this), { once: true });
-		this._parent?.urlHandler?.addEventListener("url-changed", this._onUrlChange.bind(this));
-		this._parent?.oncePSVReady().then(() => this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this)));
+		this._parent?.onceReady().then(() => {
+			this._onUrlChange();
+			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
+			
+			this._parent.onceFirstPicLoaded().then(this._onPictureLoad.bind(this));
+			this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this));
+		});
 	}
 
 	/** @private */

package/src/components/styles.js

@@ -13,7 +13,7 @@ export const panel = css`
 		color: var(--widget-font);
 		min-width: 250px;
 		box-sizing: border-box;
-		font-family: sans-serif;
+		font-family: var(--font-family);
 	}
 
 	.pnx-panel.pnx-hidden {
@@ -58,6 +58,7 @@ export const textarea = css`
 		padding: 5px;
 		width: 100%;
 		box-sizing: border-box;
+		font-family: var(--font-family);
 	}
 `;
 
@@ -70,6 +71,7 @@ export const select = css`
 		border-radius: 20px;
 		font-size: 16px;
 		padding: 2px 10px;
+		font-family: var(--font-family);
 	}
 
 	select.pnx-100w {
@@ -87,6 +89,7 @@ export const input = css`
 		border-radius: 20px;
 		font-size: 16px;
 		padding: 2px 10px;
+		font-family: var(--font-family);
 	}
 
 	input.pnx-100w {
@@ -98,14 +101,14 @@ export const input = css`
 // Buttons
 export const btn = css`
 	:host {
-		display: inline-block;
+		display: inline-flex;
 	}
 	
 	/* Common properties */
 	.pnx-btn {
 		white-space: nowrap;
-		font-size: 0.9em;
-		font-family: sans-serif;
+		font-size: 1em;
+		font-family: var(--font-family);
 		flex-grow: 1;
 		flex-shrink: 1;
 		text-align: center;
@@ -155,7 +158,7 @@ export const btn = css`
 		height: 40px;
 		line-height: 40px;
 		font-size: 16px;
-		font-weight: 400;
+		font-weight: 500;
 		min-width: 40px;
 		padding: 0 10px;
 		gap: 8px;
@@ -232,6 +235,10 @@ export const btn = css`
 
 // Titles
 export const titles = css`
+	h1, h2, h3, h4, h5, h6 {
+		font-family: var(--font-family);
+	}
+	
 	h3 {
 		font-size: 1.1em;
 		line-height: 1.1em;

package/src/components/ui/ButtonGroup.css

@@ -1,3 +1,7 @@
+pnx-button-group > pnx-button {
+	display: inline-block;
+}
+
 /* Togglable in group */
 pnx-button-group > pnx-togglable-group > pnx-button {
 	width: 100%;

package/src/components/ui/Loader.js

@@ -28,7 +28,7 @@ export default class Loader extends LitElement {
 			background-size: cover;
 			background-position: center; 
 			z-index: 200;
-			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+			font-family: var(--font-family);
 			font-weight: 550;
 			color: var(--black);
 			font-size: 1.4em;

package/src/components/ui/QualityScore.js

@@ -32,14 +32,14 @@ export default class QualityScore extends LitElement {
 			font-size: 18px;
 			width: 25px;
 			height: 30px;
-			line-height: 26px;
+			line-height: 28px;
 			display: inline-block;
 			border: 1px solid white;
 			text-align: center;
 			background-color: gray;
 			color: rgba(255,255,255,0.9);
-			font-family: sans-serif;
-			font-weight: bold;
+			font-family: var(--font-family);
+			font-weight: 800;
 			vertical-align: middle;
 		}
 
@@ -58,7 +58,7 @@ export default class QualityScore extends LitElement {
 		.selected, input[type="checkbox"]:checked + label {
 			width: 30px;
 			height: 42px;
-			line-height: 37px;
+			line-height: 41px;
 			border-radius: 8px;
 			font-size: 27px;
 			color: white;
@@ -71,7 +71,7 @@ export default class QualityScore extends LitElement {
 		label:hover {
 			width: 28px;
 			height: 35px;
-			line-height: 30px;
+			line-height: 34px;
 			border-radius: 3px;
 			font-size: 22px;
 			color: white;

package/src/components/ui/SearchBar.js

@@ -50,6 +50,7 @@ export default class SearchBar extends LitElement {
 			width: fit-content;
 			max-width: 100%;
 			box-sizing: border-box;
+			font-family: var(--font-family);
 		}
 		.sb.sb-xxl {
 			height: 40px;
@@ -113,9 +114,9 @@ export default class SearchBar extends LitElement {
 			background-color: var(--widget-bg);
 			color: var(--widget-font);
 			z-index: 130;
-			font-size: 1em;
+			font-size: 1.05em;
   			line-height: normal;
-			font-family: sans;
+			font-family: var(--font-family);
 		}
 		.sb.sb-xxl .sb-results {
 			top: 45px;