Ajout des legendes

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)