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"){