Files
FarmMapsLib/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
2026-02-03 09:59:25 +01:00

51 lines
2.9 KiB
HTML

<div>
@if (itemLayers.length > 0) {
<div class="layerlist">
<div class="list-group">
@for (itemLayer of itemLayers; track itemLayer.item.code) {
<div class="list-group-item list-group-item-action p-2 text-truncate" [ngClass]="{'active' : selectedLayer==itemLayer}">
<div (click)="handleSelectLayer($event,itemLayer)" [title]="itemLayer.item.name">{{itemLayer.item.name}}</div>
@if (selectedLayer==itemLayer && !baseLayers) {
<div class="mt-1">
<span class="btn-group">
<a title="Toggle visibility"href="#" class="btn btn-light btn-sm" (click)="handleToggleVisibility($event,itemLayer)"><i class="fa" aria-hidden="true" [ngClass]="{'fa-eye':!itemLayer.visible,'fa-eye-slash':itemLayer.visible}"></i></a>
@if (itemLayer.visible) {
<a title="Transparency 25%" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.25)">25%</a>
}
@if (itemLayer.visible) {
<a title="Transparency 50%" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.5)">50%</a>
}
@if (itemLayer.visible) {
<a title="Transparency 75%" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.75)">75%</a>
}
@if (itemLayer.visible) {
<a title="No transparency" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,1)">100%</a>
}
</span>
<a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="far fa-search-plus" aria-hidden="true"></i></a>
@if (firstLayer(itemLayer)) {
<span><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="far fa-chart-bar" aria-hidden="true"></i></a></span>
}
@if (!dataLayers) {
<span class="float-end"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
}
</div>
}
@if (itemLayer.legendVisible) {
<div>
<div class="card legend">
<fm-map-layer-legend [layer]="firstLayer(itemLayer)" (click)="handleLegendClick($event,itemLayer);" [histogramenabled]="true"></fm-map-layer-legend>
</div>
</div>
}
</div>
}
</div>
</div>
} @else {
<div class="list-group">
<div class="list-group-item" i18n>No layers</div>
</div>
}
</div>