87 lines
2 KiB
JavaScript
87 lines
2 KiB
JavaScript
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: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
background-color: color-mix(in srgb, var(--background-color, transparent), transparent 50%);
|
|
|
|
box-sizing: border-box;
|
|
border: solid 1px transparent;
|
|
gap: 3px;
|
|
}
|
|
|
|
#legend-container[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.marker-icon {
|
|
max-height: 2em;
|
|
}
|
|
|
|
[data-n-marker="2"] .marker-icon {
|
|
max-height: 1.25em;
|
|
}
|
|
</style>
|
|
<div id="legend-container">
|
|
<img class="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.setProperty("--background-color", symbol.backgroundColor || "transparent");
|
|
container.style.backgroundImage = symbol.backgroundUrl ? `url(${symbol.backgroundUrl})` : "none"
|
|
container.style.borderColor = symbol.borderColor || "transparent"
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define("camp-feature-legend", FeatureLegendElement)
|