init push

src/app/map/map.component.html

@@ -0,0 +1,64 @@
+<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="layer-property-area">
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>Layer Properties</mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <div>
+          {{ currentFeatureInfo | json}}
+        </div>
+      </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" (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>{{layer.get('name') }}</h4>
+            <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>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-button (click)="saveLayers()">Speichern</button>
+      </mat-card-actions>
+    </mat-card>
+  </div>
+</div>