@extendz/extendz-openlayer/extendz-openlayer.component.html

Extend UI Platform built on Angular Material

<!--
    Copyright 2018 the original author or authors
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
 
        http://www.apache.org/licenses/LICENSE-2.0
 
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->

<mat-toolbar class="map-tool-bar">
  <button mat-icon-button (click)="setToolType(OpenLayerToolType.POLYGON)" mdTooltip="Crop (C)">
    <mat-icon>
      <svg viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M17 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z" />
      </svg>
    </mat-icon>
  </button>
  <mat-form-field *ngIf="(currentToolType == OpenLayerToolType.POLYGON && polygontyps?.length > 0)">
    <mat-select placeholder="Polygon Type" (change)="setTool($event)">
      <mat-option *ngFor="let polygontype of polygontyps" [value]="polygontype">
        {{polygontype.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <button mat-icon-button (click)="setToolType(OpenLayerToolType.POINT)" mdTooltip="Crop (C)">
    <mat-icon>
      <svg viewBox="0 0 24 24">
        <path d="M18 8c0-3.31-2.69-6-6-6S6 4.69 6 8c0 4.5 6 11 6 11s6-6.5 6-11zm-8 0c0-1.1.9-2 2-2s2 .9 2 2-.89 2-2 2c-1.1 0-2-.9-2-2zM5 20v2h14v-2H5z"
        />
        <path d="M0 0h24v24H0z" fill="none" />
      </svg>
    </mat-icon>
  </button>
  <mat-form-field *ngIf="(currentToolType == OpenLayerToolType.POINT && pointstyps?.length > 0)">
    <mat-select placeholder="Point Type" (change)="setTool($event)">
      <mat-option *ngFor="let pointstype of pointstyps" [value]="pointstype">
        {{pointstype.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <button mat-icon-button (click)="selectMode()" *ngIf="service.haveFeature">
    <mat-icon>
      <svg f viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M1 9h2V7H1v2zm0 4h2v-2H1v2zm0-8h2V3c-1.1 0-2 .9-2 2zm8 16h2v-2H9v2zm-8-4h2v-2H1v2zm2 4v-2H1c0 1.1.9 2 2 2zM21 3h-8v6h10V5c0-1.1-.9-2-2-2zm0 14h2v-2h-2v2zM9 5h2V3H9v2zM5 21h2v-2H5v2zM5 5h2V3H5v2zm16 16c1.1 0 2-.9 2-2h-2v2zm0-8h2v-2h-2v2zm-8 8h2v-2h-2v2zm4 0h2v-2h-2v2z"
        />
      </svg>
    </mat-icon>
  </button>
  <button mat-icon-button (click)="undoDelete()" *ngIf="service.featureDeleted">
    <mat-icon>
      <svg viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
        />
      </svg>
    </mat-icon>
  </button>
</mat-toolbar>
<div id="openlayer"></div>