diff --git a/css/style.css b/css/style.css
index ae6ae9d..63b8494 100644
--- a/css/style.css
+++ b/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 {
diff --git a/js/components/feature-legend.js b/js/components/feature-legend.js
index 8967d62..42bf594 100644
--- a/js/components/feature-legend.js
+++ b/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]) {
- display: none;
+[data-n-marker="2"] .marker-icon {
+ max-height: 1.25em;
}
-
![]()
+
`
@@ -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
- } else {
- marker.removeAttribute("src")
+
+ let markers = document.createDocumentFragment()
+ if(Array.isArray(symbol.markerUrl)){
+ 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)
}
}
diff --git a/js/map.js b/js/map.js
index 1e84919..906e1df 100644
--- a/js/map.js
+++ b/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")
- iconEl.src = symbol.markerUrl
- contentEl.append(iconEl)
+ let markerList = Array.isArray(symbol.markerUrl) ? symbol.markerUrl : [symbol.markerUrl];
+ for(let marker of markerList){
+ let iconEl = document.createElement("img")
+ iconEl.src = marker
+ contentEl.append(iconEl)
+ }
}
if(symbol.borderColor && symbol.borderColor != "white"){