72 lines
1.4 KiB
JavaScript
72 lines
1.4 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: 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)
|