Ajout des legendes

css/style.css

@@ -182,7 +182,15 @@ body > hr {
 camp-feature-short-header {
 	display: grid;
 	grid-template-rows: 1fr min-content;
-	grid-template-columns: 1fr;
+	grid-template-columns: 3em 1fr;
+	gap: 0.5ex 0.5em;
+	vertical-align: center;
+}
+
+camp-feature-short-header .feature-legend {
+	grid-row: 1 / 3;
+	height: 3em;
+	align-self: flex-start;
 }
 
 camp-feature-short-header h2 {
@@ -215,3 +223,9 @@ camp-feature-short-header .feature-location {
 	text-decoration: none;
 	color: inherit;
 }
+
+/* FEATURE */
+
+camp-feature {
+	min-height: 25vh;
+}

js/components/feature-legend.js

@@ -0,0 +1,72 @@
+const TEMPLATE = document.createElement("template")
+TEMPLATE.innerHTML = `
+<style>
+:host {
+	display: inline-block;
+	width: 3em;
+	height: 3em;
+	background: #404040;
+}
+
+#legend-container {
+	width: 100%;
+	height: 100%;
+
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+
+	box-sizing: border-box;
+	border: solid 1px transparent;
+}
+
+#legend-container[hidden] {
+	display: none;
+}
+
+#marker-icon {
+	max-height: 2em;
+}
+
+#marker-icon:not([src]) {
+	display: none;
+}
+</style>
+<div id="legend-container">
+	<img id="marker-icon" />
+</div>
+`
+
+export class FeatureLegendElement extends HTMLElement {
+
+	feature
+	
+	connectedCallback(){
+		if(!this.shadow){
+			this.shadow = this.attachShadow({mode: "open"})
+			this.shadow.append(TEMPLATE.content.cloneNode(true))
+		}
+		this.updateContent()
+	}
+
+	updateContent(){
+		let container = this.shadow.getElementById("legend-container")
+		let marker = this.shadow.getElementById("marker-icon")
+		container.hidden = !this.feature
+		if(this.feature){
+			let symbol = this.feature.mapSymbol
+			container.style.backgroundColor = symbol.backgroundColor || "transparent"
+			container.style.backgroundImage = symbol.backgroundUrl ? `url(${symbol.backgroundUrl})` : "none"
+			container.style.borderColor = symbol.borderColor || "transparent"
+			if(symbol.markerUrl){
+				marker.src = symbol.markerUrl
+			} else {
+				marker.removeAttribute("src")
+			}
+		}
+	}
+	
+}
+
+customElements.define("camp-feature-legend", FeatureLegendElement)

js/components/feature-short-header.js

@@ -1,5 +1,8 @@
+import "./feature-legend.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>
 `
@@ -14,6 +17,9 @@ export class FeatureShortHeaderElement extends HTMLElement {
 
 	set feature(value){
 		this.#feature = value
+		let legend = this.querySelector(".feature-legend")
+		if(legend)
+			legend.feature = value
 	}
 
 	connectedCallback(){
@@ -24,7 +30,12 @@ export class FeatureShortHeaderElement extends HTMLElement {
 		if(!this.feature){
 			this.replaceChildren()
 		} else {
+
 			this.replaceChildren(TEMPLATE.content.cloneNode(true))
+			
+			this.querySelector(".feature-legend").feature = this.feature
+			this.querySelector(".feature-legend").updateContent()
+			
 			this.querySelector(".feature-name").textContent = 
 				this.feature?.properties?.name || 
 				this.feature.mapSymbol.genericName ||