refactor: add example to change vector tile style

projects/demo-maps/src/app/app.module.ts

@@ -43,6 +43,7 @@ import { RouteExampleOwcLayersComponent } from './route-components/route-example
 import { BookmarksComponent } from './route-components/bookmarks/bookmarks.component';
 import { ExampleLayerDescriptionComponent } from './components/example-layer-description/example-layer-description.component';
 import { ExampleGroupLegendComponent } from './components/example-group-legend/example-group-legend.component';
+import { VtileLayerActionComponent } from './components/vtile-layer-action/vtile-layer-action.component';
 
 @NgModule({
   declarations: [
@@ -73,7 +74,8 @@ import { ExampleGroupLegendComponent } from './components/example-group-legend/e
     RouteExampleOwcLayersComponent,
     BookmarksComponent,
     ExampleLayerDescriptionComponent,
-    ExampleGroupLegendComponent
+    ExampleGroupLegendComponent,
+    VtileLayerActionComponent
   ],
   imports: [
     BrowserModule,

projects/demo-maps/src/app/components/vtile-layer-action/vtile-layer-action.component.html

@@ -0,0 +1,7 @@
+<clr-checkbox-wrapper>
+  <label>
+    Change Water color
+  </label>
+  <input type="checkbox" name="switch_water" [value]="fillChanged" (change)="switchWater($event)"
+    [checked]="fillChanged" clrCheckbox>
+</clr-checkbox-wrapper>

projects/demo-maps/src/app/components/vtile-layer-action/vtile-layer-action.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VtileLayerActionComponent } from './vtile-layer-action.component';
+
+describe('VtileLayerActionComponent', () => {
+  let component: VtileLayerActionComponent;
+  let fixture: ComponentFixture<VtileLayerActionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ VtileLayerActionComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VtileLayerActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/demo-maps/src/app/components/vtile-layer-action/vtile-layer-action.component.ts

@@ -0,0 +1,45 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { LayersService } from '@dlr-eoc/services-layers';
+
+@Component({
+  selector: 'app-vtile-layer-action',
+  templateUrl: './vtile-layer-action.component.html',
+  styleUrls: ['./vtile-layer-action.component.scss']
+})
+export class VtileLayerActionComponent implements OnInit {
+  @Input() layer;
+
+  @Input() layersSvc: LayersService;
+
+  public fillColor = 'rgba(196, 203, 205, 1)';
+  public fillChanged = false;
+  public tempLayer;
+  constructor() { }
+
+  ngOnInit(): void {
+    const tempLayer = this.layer;
+    if (tempLayer) {
+
+      const style = tempLayer.options.style;
+      let index = style.layers.findIndex(l => l.id === "water");
+      this.fillChanged = (style.layers[index].paint["fill-color"] === this.fillColor) ? false : true;
+    }
+
+  }
+
+  switchWater(event: any) {
+    const tempLayer = this.layer;
+    const style = tempLayer.options.style;
+    let index = style.layers.findIndex(l => l.id === "water")
+    if (!this.fillChanged) {
+      style.layers[index].paint["fill-color"] = "rgba(0, 0, 0, 1)";
+      this.fillChanged = true;
+    } else {
+      style.layers[index].paint["fill-color"] = this.fillColor;
+      this.fillChanged = false;
+    }
+
+    this.layersSvc.updateLayer(tempLayer);
+  }
+
+}

projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.ts

@@ -14,6 +14,8 @@ import olStroke from 'ol/style/Stroke';
 import { WmsService } from '@dlr-eoc/services-ogc';
 import { ExampleLayerDescriptionComponent } from '../../components/example-layer-description/example-layer-description.component';
 import { ExampleGroupLegendComponent } from '../../components/example-group-legend/example-group-legend.component';
+import greyscale from '@dlr-eoc/shared-assets/open-map-styles/open-map-style.json';
+import { VtileLayerActionComponent } from '../../components/vtile-layer-action/vtile-layer-action.component';
 
 @Component({
   selector: 'app-route-map',
@@ -107,7 +109,23 @@ export class RouteMapComponent implements OnInit {
       id: 'OSM_Base'
     });
 
-    const layers = [eocLiteMerge, OsmLayer, TransparentBackground, worldRelief];
+    const geoserviceVTiles = new VectorLayer({
+      name: 'Open Map Styles',
+      id: 'planet_eoc_vector_tiles',
+      attribution: `© <a href="http://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright" target="_blank"> OpenStreetMap contributors</a>`,
+      description: `EOC-Geoservice TMS-Service, Vector Tiles with OpenMapTiles and customised <a href="https://openmaptiles.org/styles/#positron">positron</a> Style.`,
+      type: 'tms',
+      url: 'https://{s}.tiles.geoservice.dlr.de/service/tms/1.0.0/planet_eoc@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf?flipy=true',
+      subdomains: ['a', 'b', 'c', 'd'],
+      options: {
+        style: greyscale,
+        styleSource: 'planet_eoc'
+      },
+      visible: false,
+      action: { component: VtileLayerActionComponent, inputs: { layersSvc: this.layersSvc } },
+    });
+
+    const layers = [eocLiteMerge, OsmLayer, TransparentBackground, worldRelief, geoserviceVTiles];
 
     /** add layers with the LayersService */
     layers.map(layer => this.layersSvc.addLayer(layer, 'Baselayers'));