De multiples icones peuvemt maintenant etre utilisées

css/style.css

@@ -95,12 +95,13 @@ body > hr {
 #map .highlight-point-icon > * {
 	width: fit-content;
 	height: fit-content;
-    transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	position: relative;
+	gap: 3px;
 }
 
 #map .highlight-point-icon > a {

js/components/feature-legend.js

@@ -13,7 +13,7 @@ TEMPLATE.innerHTML = `
 	height: 100%;
 
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 
@@ -21,22 +21,23 @@ TEMPLATE.innerHTML = `
 
 	box-sizing: border-box;
 	border: solid 1px transparent;
+	gap: 3px;
 }
 
 #legend-container[hidden] {
 	display: none;
 }
 
-#marker-icon {
+.marker-icon {
 	max-height: 2em;
 }
 
-#marker-icon:not([src]) {
+[data-n-marker="2"] .marker-icon {
-	display: none;
+	max-height: 1.25em;
 }
 </style>
 <div id="legend-container">
-	<img id="marker-icon" />
+	<img class="marker-icon" />
 </div>
 `
 
@@ -61,11 +62,23 @@ export class FeatureLegendElement extends HTMLElement {
 			container.style.setProperty("--background-color", 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
+			let markers = document.createDocumentFragment()
-			} else {
+			if(Array.isArray(symbol.markerUrl)){
-				marker.removeAttribute("src")
+				for(let markerUrl of symbol.markerUrl){
+					let el = document.createElement("img")
+					el.classList.add("marker-icon")
+					el.src = markerUrl
+					markers.append(el)
+				}
+			} else if(symbol.markerUrl){
+				let el = document.createElement("img")
+				el.classList.add("marker-icon")
+				el.src = symbol.markerUrl
+				markers.append(el)
 			}
+			container.dataset.nMarker = markers.children.length;
+			container.replaceChildren(markers)
 		}
 	}
 	

js/map.js

@@ -117,9 +117,12 @@ export async function init_places(places_db){
 
             let symbol = feature.mapSymbol;
             if(symbol.markerUrl) {
-                let iconEl = document.createElement("img")
+                let markerList = Array.isArray(symbol.markerUrl) ? symbol.markerUrl : [symbol.markerUrl];
-                iconEl.src = symbol.markerUrl
+                for(let marker of markerList){
-                contentEl.append(iconEl)
+                    let iconEl = document.createElement("img")
+                    iconEl.src = marker
+                    contentEl.append(iconEl)
+                }
             }
 
             if(symbol.borderColor && symbol.borderColor != "white"){