@panoramax/web-viewer 4.0.1-develop-32d1fb01 → 4.0.1-develop-2250d7d3

package/docs/reference/components/ui/CopyButton.md

@@ -35,4 +35,5 @@ Component properties.
 | [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, outline, flat, superflat, inline, superinline) |
 | [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
 | [unstyled] | <code>boolean</code> | <code>false</code> | Disable all styling (for list group integration) |
+| [title] | <code>string</code> |  | Tooltip text displayed when hovering over the button |
 

package/docs/reference/components/ui/widgets/CopyCoordinates.md

@@ -0,0 +1,32 @@
+<a name="Panoramax.components.ui.widgets.CopyCoordinates"></a>
+
+## Panoramax.components.ui.widgets.CopyCoordinates ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui.widgets</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-copy-coordinates  
+
+* [.CopyCoordinates](#Panoramax.components.ui.widgets.CopyCoordinates) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new CopyCoordinates()](#new_Panoramax.components.ui.widgets.CopyCoordinates_new)
+    * [.properties](#Panoramax.components.ui.widgets.CopyCoordinates+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.widgets.CopyCoordinates_new"></a>
+
+### new CopyCoordinates()
+Copy Coordinates button allows easy copy of several format of map coordinates.
+
+**Example**  
+```html
+<pnx-copy-coordinates gps=${[-1.7, 48.6]} _parent=${viewer} />
+```
+<a name="Panoramax.components.ui.widgets.CopyCoordinates+properties"></a>
+
+### copyCoordinates.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>CopyCoordinates</code>](#Panoramax.components.ui.widgets.CopyCoordinates)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| gps | <code>Array.&lt;number&gt;</code> | GPS/map coordinates, as [lon, lat] |
+

package/docs/reference.md

@@ -61,6 +61,7 @@ Basic UI components:
 
 More complex UI components (but not menus):
 
+- [CopyCoordinates](./reference/components/ui/widgets/CopyCoordinates.md) : a copy-to-clipboard button for coordinates, with many format options.
 - [GeoSearch](./reference/components/ui/widgets/GeoSearch.md) : a geocoder search bar with GPS location tool.
 - [Legend](./reference/components/ui/widgets/Legend.md) : a togglable map/picture legend.
 - [MapFiltersButton](./reference/components/ui/widgets/MapFiltersButton.md) : a togglable map filters button & menu.

package/mkdocs.yml

@@ -77,6 +77,7 @@ nav:
         - ShareMenu: 'reference/components/menus/ShareMenu.md'
       - ui:
         - widgets:
+          - CopyCoordinates: 'reference/components/ui/widgets/CopyCoordinates.md'
           - GeoSearch: 'reference/components/ui/widgets/GeoSearch.md'
           - Legend: 'reference/components/ui/widgets/Legend.md'
           - MapFiltersButton: 'reference/components/ui/widgets/MapFiltersButton.md'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.1-develop-32d1fb01",
+  "version": "4.0.1-develop-2250d7d3",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/menus/PictureMetadata.js

@@ -146,8 +146,18 @@ export default class PictureMetadata extends LitElement {
 		// Location tab
 		const orientation = this._meta?.properties?.["view:azimuth"] !== undefined && `${this._meta.properties["view:azimuth"]}°`;
 		const locationData = [
-			{ title: this._parent?._t.pnx.metadata_location_longitude, content: this._meta.gps[0] },
-			{ title: this._parent?._t.pnx.metadata_location_latitude, content: this._meta.gps[1] },
+			{
+				title: this._parent?._t.pnx.metadata_location_coordinates,
+				content: html`
+					${this._meta.gps[0]}, ${this._meta.gps[1]}
+					<pnx-copy-coordinates
+						._parent=${this._parent}
+						.gps=${this._meta.gps}
+						style="margin-left: 10px"
+					></pnx-copy-coordinates>
+				`,
+				style: "width: 100%"
+			},
 			{ title: this._parent?._t.pnx.metadata_location_orientation, content: orientation || missing() },
 			{ title: this._parent?._t.pnx.metadata_location_precision, content: getGPSPrecision(this._meta) || missing() },
 		];

package/src/components/styles.js

@@ -274,6 +274,67 @@ export const btn = css`
 	}
 `;
 
+// Button group
+export const btngroup = css`
+	pnx-button-group > pnx-button {
+		display: inline-flex;
+	}
+
+	pnx-button-group > pnx-button::part(btn) {
+		height: unset;
+	}
+
+	/* Togglable in group */
+	pnx-button-group > pnx-togglable-group > pnx-button {
+		width: 100%;
+		height: 100%;
+	}
+
+	/* Row */
+	pnx-button-group[dir="row"] > :not(:first-child):not(:last-child)::part(btn),
+	pnx-button-group[dir="row"] > :not(:first-child):not(:last-child) > ::part(btn) {
+		border-radius: 0;
+		border-left: none;
+		border-right: none;
+	}
+
+	pnx-button-group[dir="row"] > :first-child::part(btn),
+	pnx-button-group[dir="row"] > :first-child > ::part(btn) {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		border-right: none;
+	}
+
+	pnx-button-group[dir="row"] > :last-child::part(btn),
+	pnx-button-group[dir="row"] > :last-child > ::part(btn) {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+		border-left: none;
+	}
+
+	/* Column */
+	pnx-button-group[dir="column"] > :not(:first-child):not(:last-child)::part(btn),
+	pnx-button-group[dir="column"] > :not(:first-child):not(:last-child) > ::part(btn) {
+		border-radius: 0;
+		border-top: none;
+		border-bottom: none;
+	}
+
+	pnx-button-group[dir="column"] > :first-child::part(btn),
+	pnx-button-group[dir="column"] > :first-child > ::part(btn) {
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+		border-bottom: none;
+	}
+
+	pnx-button-group[dir="column"] > :last-child::part(btn),
+	pnx-button-group[dir="column"] > :last-child > ::part(btn) {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		border-top: none;
+	}
+`;
+
 // Titles
 export const titles = css`
 	h1, h2, h3, h4, h5, h6 {

package/src/components/ui/ButtonGroup.css

@@ -1,3 +1,5 @@
+/* Also defined in styles.js */
+
 pnx-button-group > pnx-button {
 	display: inline-flex;
 }

package/src/components/ui/CopyButton.js

@@ -41,6 +41,7 @@ export default class CopyButton extends LitElement {
 	 * @property {string} [kind=full] The style variation of the button (full, outline, flat, superflat, inline, superinline)
 	 * @property {string} [size=md] The size of the button (sm, md, l, xl, xxl)
 	 * @property {boolean} [unstyled=false] Disable all styling (for list group integration)
+	 * @property {string} [title] Tooltip text displayed when hovering over the button
      */
 	static properties = {
 		text: {type: String},
@@ -48,6 +49,7 @@ export default class CopyButton extends LitElement {
 		kind: {type: String},
 		size: {type: String},
 		unstyled: {type: Boolean},
+		title: { type: String },
 		_active: {state: true, type: Boolean},
 	};
 
@@ -94,7 +96,7 @@ export default class CopyButton extends LitElement {
 			[`pnx-btn-${this.kind}`]: !this.unstyled,
 			[`pnx-btn-${this.size}`]: !this.unstyled,
 		};
-		return html`<button class=${classMap(classes)} part="btn">
+		return html`<button title=${this.title} class=${classMap(classes)} part="btn">
 			${this._active ?
 				html`${this._t?.pnx.copied || ""} ${fa(faCheck)}` :
 				html`<slot>${fa(faCopy)} ${this._t?.pnx.copy || ""}</slot>`

package/src/components/ui/TogglableGroup.js

@@ -145,7 +145,7 @@ export default class TogglableGroup extends LitElement {
 			"pnx-padded": this.padded !== "false",
 		};
 
-		return html`<div class="container">
+		return html`<div class="container" @click=${e => e.stopPropagation()}>
 			<slot name="button" @slotchange=${this.handleButtonSlotChange}></slot>
 			<div class=${classMap(panelClasses)} part="menu">
 				<slot></slot>

package/src/components/ui/widgets/CopyCoordinates.js

@@ -0,0 +1,75 @@
+import { LitElement, html, css } from "lit";
+import { degToDms } from "../../../utils/utils";
+import { fa } from "../../../utils/widgets";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { btngroup } from "../../styles";
+
+/**
+ * Copy Coordinates button allows easy copy of several format of map coordinates.
+ * @class Panoramax.components.ui.widgets.CopyCoordinates
+ * @element pnx-copy-coordinates
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-copy-coordinates gps=${[-1.7, 48.6]} _parent=${viewer} />
+ * ```
+ */
+export default class CopyCoordinates extends LitElement {
+	/** @private */
+	static styles = [btngroup, css`
+		pnx-togglable-group::part(menu) {
+			border-radius: 5px;
+			min-width: unset;
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.widgets.CopyCoordinates#
+	 * @type {Object}
+	 * @property {number[]} gps GPS/map coordinates, as [lon, lat]
+	 */
+	static properties = {
+		gps: {type: Array},
+	};
+
+	/** @private */
+	render() {
+		const dmslonval = degToDms(this.gps[0]);
+		const dmslon = dmslonval.d < 0 ? `${Math.abs(dmslonval.d)}°${dmslonval.m}'${dmslonval.s}"W` : `${dmslonval.d}°${dmslonval.m}'${dmslonval.s}"E`;
+		const dmslatval = degToDms(this.gps[1]);
+		const dmslat = dmslatval.d < 0 ? `${Math.abs(dmslatval.d)}°${dmslatval.m}'${dmslatval.s}"S` : `${dmslatval.d}°${dmslatval.m}'${dmslatval.s}"N`;
+
+		const values = {
+			ddeclatlon: `${this.gps[1].toFixed(7)}, ${this.gps[0].toFixed(7)}`,
+			ddeclonlat: `${this.gps[0].toFixed(7)}, ${this.gps[1].toFixed(7)}`,
+			ddmslonlat: `${dmslon}, ${dmslat}`,
+			ddmslatlon: `${dmslat}, ${dmslon}`,
+		};
+
+		return html`<pnx-button-group style="display: inline-block; vertical-align: baseline" dir="row">
+			<pnx-copy-button
+				size="sm"
+				text=${values.ddeclonlat}
+				title=${this._parent?._t.pnx.metadata_location_copy.replace("{v}", values.ddeclonlat)}
+			></pnx-copy-button>
+
+			<pnx-togglable-group padded="false" ._parent=${this._parent}>
+				<pnx-button
+					size="sm"
+					slot="button"
+					title=${this._parent?._t.pnx.metadata_location_copy_more}
+				>${fa(faChevronDown)}</pnx-button>
+				<pnx-list-group>
+					${Object.values(values).map(text => html`
+						<pnx-copy-button unstyled text=${text} ._t=${this._parent._t}>
+							${this._parent?._t.pnx.metadata_location_copy.replace("{v}", text)}
+						</pnx-copy-button>
+					`)}
+				</pnx-list-group>
+			</pnx-togglable-group>
+		</pnx-button-group>`;
+	}
+}
+
+customElements.define("pnx-copy-coordinates", CopyCoordinates);

package/src/components/ui/widgets/PictureLegendActions.js

@@ -58,7 +58,7 @@ export default class PictureLegendActions extends LitElement {
 
 	/** @private */
 	_closeGroup() {
-		this.renderRoot.querySelector("pnx-togglable-group").close();
+		this.renderRoot.querySelector("#pic-legend-headline-menu").close();
 	}
 
 	/** @private */

package/src/components/ui/widgets/index.js

@@ -3,6 +3,7 @@
  * @module Panoramax:components:ui:widgets
  */
 
+export {default as CopyCoordinates} from "./CopyCoordinates";
 export {default as GeoSearch} from "./GeoSearch";
 export {default as Legend} from "./Legend";
 export {default as MapFiltersButton} from "./MapFiltersButton";

package/src/translations/en.json

@@ -156,10 +156,11 @@
         "metadata_camera_resolution": "Resolution",
         "metadata_camera_focal_length": "Focal length",
         "metadata_location": "Position",
-        "metadata_location_longitude": "Longitude",
-        "metadata_location_latitude": "Latitude",
+        "metadata_location_coordinates": "Coordinates (longitude, latitude)",
         "metadata_location_orientation": "Direction",
         "metadata_location_precision": "Positioning precision",
+        "metadata_location_copy": "Copy {v}",
+        "metadata_location_copy_more": "More coordinates copy options",
         "metadata_quality": "Quality",
         "metadata_quality_help": "Know more about Quality Score",
         "metadata_quality_score": "Global score",

package/src/translations/fr.json

@@ -156,10 +156,11 @@
         "metadata_camera_resolution": "Résolution",
         "metadata_camera_focal_length": "Longueur focale",
         "metadata_location": "Position",
-        "metadata_location_longitude": "Longitude",
-        "metadata_location_latitude": "Latitude",
+        "metadata_location_coordinates": "Coordonnées (longitude, latitude)",
         "metadata_location_orientation": "Direction",
         "metadata_location_precision": "Précision du positionnement",
+        "metadata_location_copy": "Copier {v}",
+        "metadata_location_copy_more": "Copier d'autres formats de coordonnées",
         "metadata_quality": "Qualité",
         "metadata_quality_help": "En savoir plus sur le score de qualité",
         "metadata_quality_score": "Note globale",

package/src/translations/it.json

@@ -183,7 +183,9 @@
         "contribute_id": "Contribuisci a OpenStreetMap con l’editor iD",
         "geo_uri": "App esterna",
         "filter_date_6months": "6 mesi",
-        "picture_all": "Tutte"
+        "picture_all": "Tutte",
+        "metadata_exif_doc": "Doc per gli attributi EXIF",
+        "metadata_exif_doc_title": "Vai alla documentazione di Exiv2 per i dettagli completi sulle definizioni degli attributi EXIF e XMP"
     },
     "psv": {
         "loadError": "Impossibile caricare l’immagine panoramica",

package/src/utils/utils.js

@@ -211,6 +211,19 @@ export function xyzToPosition(x, y, z) {
 	};
 }
 
+/**
+ * Transforms decimal degrees into degrees/minutes/seconds format.
+ * @param {number} degrees The decimal degrees value
+ * @returns {object} Coordinate as {d,m,s} object
+ */
+export function degToDms(degrees) {
+	const d = degrees < 0 ? Math.ceil(degrees) : Math.floor(degrees);
+	const rm = Math.abs(degrees - d) * 60;
+	const m = Math.floor(rm);
+	const s = parseFloat(((rm - m) * 60).toFixed(3));
+	return { d, m, s };
+}
+
 /**
  * Get the query string for JOSM to load current picture area
  * @returns {string} The query string, or null if not available

package/tests/utils/utils.test.js

@@ -8,18 +8,18 @@ jest.mock("../../src/utils/map", () => ({
 
 describe("getGrade", () => {
 	it("works with null-like", () => {
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, null)).toBeNull();
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, undefined)).toBeNull();
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, "")).toBeNull();
-    });
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, null)).toBeNull();
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, undefined)).toBeNull();
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, "")).toBeNull();
+	});
 
 	it("works with grade values", () => {
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 0)).toBe(1);
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 5)).toBe(1);
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 12)).toBe(2);
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 25)).toBe(3);
-        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 40)).toBe(4);
-    });
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 0)).toBe(1);
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 5)).toBe(1);
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 12)).toBe(2);
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 25)).toBe(3);
+		expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 40)).toBe(4);
+	});
 });
 
 describe("getDistance", () => {
@@ -32,25 +32,25 @@ describe("getDistance", () => {
 });
 
 describe("svgToPSVLink", () => {
-    it("works", () => {
-        const base64Svg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxjaXJjbGUgY3g9JzUnIGN5PSc1JyByPSc1JyBmaWxsPScjMDAwJy8+PC9zdmc+";
-        const fillColor = "red";
-        const result = utils.svgToPSVLink(base64Svg, fillColor);
-        
-        expect(result).toBeInstanceOf(HTMLButtonElement);
-        expect(result.classList.contains("pnx-psv-tour-arrows")).toBe(true);
-        expect(result.style.color).toBe(fillColor);
-        expect(result.querySelector("svg")).not.toBeNull();
-    });
-
-    it("works with invalid input", () => {
-        const invalidBase64Svg = "http://test.net/invalid_string";
-        const result = utils.svgToPSVLink(invalidBase64Svg, "blue");
-        
-        expect(result).toBeInstanceOf(HTMLImageElement);
-        expect(result.src).toBe(invalidBase64Svg);
-        expect(result.alt).toBe("");
-    });
+	it("works", () => {
+		const base64Svg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxjaXJjbGUgY3g9JzUnIGN5PSc1JyByPSc1JyBmaWxsPScjMDAwJy8+PC9zdmc+";
+		const fillColor = "red";
+		const result = utils.svgToPSVLink(base64Svg, fillColor);
+		
+		expect(result).toBeInstanceOf(HTMLButtonElement);
+		expect(result.classList.contains("pnx-psv-tour-arrows")).toBe(true);
+		expect(result.style.color).toBe(fillColor);
+		expect(result.querySelector("svg")).not.toBeNull();
+	});
+
+	it("works with invalid input", () => {
+		const invalidBase64Svg = "http://test.net/invalid_string";
+		const result = utils.svgToPSVLink(invalidBase64Svg, "blue");
+		
+		expect(result).toBeInstanceOf(HTMLImageElement);
+		expect(result.src).toBe(invalidBase64Svg);
+		expect(result.alt).toBe("");
+	});
 });
 
 describe("getAzimuth", () => {
@@ -197,92 +197,119 @@ describe("xyzToPosition", () => {
 	});
 });
 
+describe("degToDms", () => {
+	it("converts positive decimal degrees to DMS correctly", () => {
+		const result = utils.degToDms(45.7896541);
+		expect(result).toEqual({ d: 45, m: 47, s: 22.755 });
+	});
+
+	it("converts negative decimal degrees to DMS correctly 1", () => {
+		const result = utils.degToDms(-12.751234);
+		expect(result).toEqual({ d: -12, m: 45, s: 4.442 });
+	});
+
+	it("converts negative decimal degrees to DMS correctly 2", () => {
+		const result = utils.degToDms(-21.007598);
+		expect(result).toEqual({ d: -21, m: 0, s: 27.353 });
+	});
+
+	it("converts zero degrees to DMS correctly", () => {
+		const result = utils.degToDms(0);
+		expect(result).toEqual({ d: 0, m: 0, s: 0 });
+	});
+
+	it("handles integer degrees correctly", () => {
+		const result = utils.degToDms(90);
+		expect(result).toEqual({ d: 90, m: 0, s: 0 });
+	});
+});
+
 describe("josmBboxParameters", () => {
 	it("works with null-like", () => {
-        expect(utils.josmBboxParameters(null)).toBeNull();
-        expect(utils.josmBboxParameters(undefined)).toBeNull();
-    });
-
-    it("works without azimuth", () => {
-        const meta = { gps: [2.3522, 48.8566] };
-        const result = utils.josmBboxParameters(meta);
-        expect(result).toBe("left=2.3522&right=2.3522&top=48.8566&bottom=48.8566&changeset_source=Panoramax");
-    });
-
-    it("works with azimuth = 0", () => {
-        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 0 } };
-        const result = utils.josmBboxParameters(meta);
-        expect(result).toBe("left=2.3522&right=2.3524&top=48.8568&bottom=48.8566&changeset_source=Panoramax");
-    });
-
-    it("works with azimuth = 180", () => {
-        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 180 } };
-        const result = utils.josmBboxParameters(meta);
-        expect(result).toBe("left=2.352&right=2.3524&top=48.8566&bottom=48.8564&changeset_source=Panoramax");
-    });
-
-    it("works with azimuth = 90", () => {
-        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 90 } };
-        const result = utils.josmBboxParameters(meta);
-        expect(result).toBe("left=2.3522&right=2.3524&top=48.8568&bottom=48.8564&changeset_source=Panoramax");
-    });
-
-    it("works with azimuth = 270", () => {
-        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 270 } };
-        const result = utils.josmBboxParameters(meta);
-        expect(result).toBe("left=2.352&right=2.3522&top=48.8568&bottom=48.8564&changeset_source=Panoramax");
-    });
+		expect(utils.josmBboxParameters(null)).toBeNull();
+		expect(utils.josmBboxParameters(undefined)).toBeNull();
+	});
+
+	it("works without azimuth", () => {
+		const meta = { gps: [2.3522, 48.8566] };
+		const result = utils.josmBboxParameters(meta);
+		expect(result).toBe("left=2.3522&right=2.3522&top=48.8566&bottom=48.8566&changeset_source=Panoramax");
+	});
+
+	it("works with azimuth = 0", () => {
+		const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 0 } };
+		const result = utils.josmBboxParameters(meta);
+		expect(result).toBe("left=2.3522&right=2.3524&top=48.8568&bottom=48.8566&changeset_source=Panoramax");
+	});
+
+	it("works with azimuth = 180", () => {
+		const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 180 } };
+		const result = utils.josmBboxParameters(meta);
+		expect(result).toBe("left=2.352&right=2.3524&top=48.8566&bottom=48.8564&changeset_source=Panoramax");
+	});
+
+	it("works with azimuth = 90", () => {
+		const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 90 } };
+		const result = utils.josmBboxParameters(meta);
+		expect(result).toBe("left=2.3522&right=2.3524&top=48.8568&bottom=48.8564&changeset_source=Panoramax");
+	});
+
+	it("works with azimuth = 270", () => {
+		const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 270 } };
+		const result = utils.josmBboxParameters(meta);
+		expect(result).toBe("left=2.352&right=2.3522&top=48.8568&bottom=48.8564&changeset_source=Panoramax");
+	});
 });
 
 describe("getCookie", () => {
-    it("should return the value of the specified cookie", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123");
-        expect(utils.getCookie("session")).toBe("abc123");
-    });
-
-    it("should return null if the cookie is not found", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123");
-        expect(utils.getCookie("user_id")).toBeUndefined();
-    });
-
-    it("should return the correct value when multiple cookies are set", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123; user_id=789; user_name=John");
-        expect(utils.getCookie("user_id")).toBe("789");
-    });
-
-    it("should return null if cookie with the specified name has no value", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=; user_id=789");
-        expect(utils.getCookie("session")).toBe("");
-    });
-
-    it("should return the correct value when the cookie contains =", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("custom_cookie=abc=123");
-        expect(utils.getCookie("custom_cookie")).toBe("abc=123");
-    });
+	it("should return the value of the specified cookie", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123");
+		expect(utils.getCookie("session")).toBe("abc123");
+	});
+
+	it("should return null if the cookie is not found", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123");
+		expect(utils.getCookie("user_id")).toBeUndefined();
+	});
+
+	it("should return the correct value when multiple cookies are set", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123; user_id=789; user_name=John");
+		expect(utils.getCookie("user_id")).toBe("789");
+	});
+
+	it("should return null if cookie with the specified name has no value", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=; user_id=789");
+		expect(utils.getCookie("session")).toBe("");
+	});
+
+	it("should return the correct value when the cookie contains =", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValueOnce("custom_cookie=abc=123");
+		expect(utils.getCookie("custom_cookie")).toBe("abc=123");
+	});
 });
 
 describe("getUserAccount", () => {
-    it("should return an object with user id and name when all cookies are present", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_id=789; user_name=John");
-        expect(utils.getUserAccount()).toEqual({ id: "789", name: "John" });
-    });
-
-    it("should return null if session cookie is missing", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValue("user_id=789; user_name=John");
-        expect(utils.getUserAccount()).toBeNull();
-    });
-
-    it("should return null if user_id cookie is missing", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_name=John");
-        expect(utils.getUserAccount()).toBeNull();
-    });
-
-    it("should return null if user_name cookie is missing", () => {
-        jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_id=789");
-        expect(utils.getUserAccount()).toBeNull();
-    });
-
-    it("should return null if all cookies are missing", () => {
-        expect(utils.getUserAccount()).toBeNull();
-    });
+	it("should return an object with user id and name when all cookies are present", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_id=789; user_name=John");
+		expect(utils.getUserAccount()).toEqual({ id: "789", name: "John" });
+	});
+
+	it("should return null if session cookie is missing", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValue("user_id=789; user_name=John");
+		expect(utils.getUserAccount()).toBeNull();
+	});
+
+	it("should return null if user_id cookie is missing", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_name=John");
+		expect(utils.getUserAccount()).toBeNull();
+	});
+
+	it("should return null if user_name cookie is missing", () => {
+		jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_id=789");
+		expect(utils.getUserAccount()).toBeNull();
+	});
+
+	it("should return null if all cookies are missing", () => {
+		expect(utils.getUserAccount()).toBeNull();
+	});
 });