Meilleur affichage des coordonnées

js/components/coords.js

@@ -0,0 +1,49 @@
+class CoordsElement extends HTMLElement {
+    #shadow;
+
+    get lon(){
+        return parseFloat(this.getAttribute("lon"))
+    }
+
+    set lon(value){
+        this.setAttribute("lon", value)
+    }
+
+    get lat(){
+        return parseFloat(this.getAttribute("lat"))
+    }
+
+    set lat(value){
+        this.setAttribute("lat", value)
+    }
+    
+    connectedCallback(){
+        this.#shadow = this.attachShadow({mode: "open"})
+        this.updateContent()
+    }
+
+    updateContent(){
+        this.#shadow.replaceChildren(
+            this.formatCoordComponent(this.lat),
+            ", ",
+            this.formatCoordComponent(this.lon)
+        )
+    }
+
+    formatCoordComponent(coord){
+        let [whole, frac] = coord.toString()
+            .split(".");
+
+        console.log(coord, whole, frac)
+
+        return `${whole || "0"}.${(frac || "00").substring(0, 7)}`
+    }
+
+    static observedAttributes = ["lat", "lon"]
+
+    attributeChangedCallback(name, oldVal, newVal){
+        this.updateContent()
+    }
+}
+
+customElements.define("camp-coords", CoordsElement)

js/components/feature-short-header.js

@@ -1,10 +1,11 @@
 import "./feature-legend.js"
+import "./coords.js"
 
 const TEMPLATE = document.createElement("template")
 TEMPLATE.innerHTML = `
 <camp-feature-legend class="feature-legend"></camp-feature-legend>
 <h2 class="feature-name"></h2>
-<small class="feature-location"></small>
+<camp-coords class="feature-location" lat="0" lon="0"></camp-coords>
 `
 
 export class FeatureShortHeaderElement extends HTMLElement {
@@ -43,9 +44,8 @@ export class FeatureShortHeaderElement extends HTMLElement {
 
 			let featurePoint = this.feature.asPoint()
 
-			this.querySelector(".feature-location").textContent =
-				this.feature?.properties?.["location-description"] ||
-				`${featurePoint.geometry.coordinates[1]}, ${featurePoint.geometry.coordinates[0]}`
+			this.querySelector(".feature-location").lon = featurePoint.geometry.coordinates[0]
+			this.querySelector(".feature-location").lat = featurePoint.geometry.coordinates[1]
 		}
 	}