51 lines
2.9 KiB
HTML
51 lines
2.9 KiB
HTML
<div>
|
|
@if (itemLayers.length > 0) {
|
|
<div class="layerlist">
|
|
<div class="list-group">
|
|
@for (itemLayer of itemLayers; track itemLayer) {
|
|
<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>
|