70 lines
2.5 KiB
HTML
70 lines
2.5 KiB
HTML
<div class="content">
|
|
<!-- map area -->
|
|
<div class="map-area">
|
|
<div class="map" #mapContainer></div>
|
|
<div class="map-info">
|
|
<form>
|
|
<label>
|
|
Show OSM Map
|
|
<input type="checkbox" [checked]="baseLayer.getVisible()"
|
|
(click)="baseLayer.setVisible(!baseLayer.getVisible())">
|
|
</label>
|
|
</form>
|
|
<div>
|
|
{{ cursorCoordinates ? cursorCoordinates : 'Lat: ? / Long: ?' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- layer property area-->
|
|
<div class="property-list-area">
|
|
<mat-card>
|
|
<mat-card-header>
|
|
<mat-card-title>Layer Properties</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<lm-feature-manager [curFeature]="cache.selectedFeature"></lm-feature-manager>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
<!-- layer control area-->
|
|
<div class="layer-control-area">
|
|
<mat-card>
|
|
<mat-card-header>
|
|
<mat-card-title>Layer
|
|
</mat-card-title>
|
|
<div class="controls">
|
|
<i class="material-icons"
|
|
matTooltip="Über diese Schaltfläche können Sie neue Layer hinzufügen.
|
|
Bitte beachten Sie, dass die Reihenfolge der Layer in der Liste umgekehrt gegenüber Reihenfolge in der Map ist."
|
|
(click)="addLayer()">add_circle</i>
|
|
</div>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div cdkDropList class="layer-list" (cdkDropListDropped)="drop($event)">
|
|
<div class="list-entry" *ngFor="let layer of customLayerCollection.getArray();let i = index" cdkDrag>
|
|
<h4 class="title">{{layer.get('name') }}</h4>
|
|
<div class="layer-controls">
|
|
<i class="material-icons" (click)="centerLayerOnMap(layer)">
|
|
center_focus_strong
|
|
</i>
|
|
<i class="material-icons" (click)="toggleLayerVisibility(layer)">
|
|
{{layer.getVisible() ? 'visibility' : 'visibility_off'}}
|
|
</i>
|
|
<i class="material-icons" (click)="editLayer(i)">
|
|
edit
|
|
</i>
|
|
<i class="material-icons" (click)="deleteLayer(layer)">
|
|
delete
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
<mat-card-actions>
|
|
<button mat-button (click)="exportLayerForApp()">Export für App</button>
|
|
<button mat-button (click)="exportLayerAsGeoJson()">Export als GeoJSON</button>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|