From a68202ce70175d4d800365c4bc1fecfed5a38f40 Mon Sep 17 00:00:00 2001
From: Richard Kettelerij <richard@mindloops.nl>
Date: Mon, 2 Oct 2023 16:17:09 +0200
Subject: [PATCH] increase linewitdh of prettier + add GH action

---
 .github/workflows/{lint.yml => lint-go.yml}   |  2 +-
 .github/workflows/lint-ts.yml                 | 33 ++++++++++++
 .../.prettierrc.json                          |  2 +-
 .../vectortile-view-component/README.md       | 30 +++--------
 .../vectortile-view-component/package.json    |  2 +-
 .../src/adminunits.html                       |  4 +-
 .../src/app/app.component.html                | 13 +----
 .../src/app/app.component.spec.ts             |  4 +-
 .../src/app/app.component.ts                  | 50 ++++---------------
 .../legend-item/legend-item.component.html    |  6 +--
 .../app/legend-item/legend-item.component.ts  | 27 ++--------
 .../app/legend-view/legend-view.component.ts  | 31 ++----------
 .../src/app/mapbox-style.service.ts           | 31 +++---------
 .../src/app/mapprojection.ts                  |  5 +-
 .../vectortile-view-component/src/index.html  | 45 ++++-------------
 15 files changed, 84 insertions(+), 201 deletions(-)
 rename .github/workflows/{lint.yml => lint-go.yml} (98%)
 create mode 100644 .github/workflows/lint-ts.yml

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint-go.yml
similarity index 98%
rename from .github/workflows/lint.yml
rename to .github/workflows/lint-go.yml
index 486e3a01..8915d078 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint-go.yml
@@ -1,4 +1,4 @@
-name: lint
+name: lint (go)
 on:
   push:
     branches:
diff --git a/.github/workflows/lint-ts.yml b/.github/workflows/lint-ts.yml
new file mode 100644
index 00000000..518fbedb
--- /dev/null
+++ b/.github/workflows/lint-ts.yml
@@ -0,0 +1,33 @@
+name: lint (web/typescript)
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+defaults:
+  run:
+    working-directory: ./webcomponents/vectortile-view-component
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+          cache-dependency-path: './webcomponents/vectortile-view-component/package-lock.json'
+      - name: Formatting
+        run: npm run format
+      - name: Linting
+        run: npm run lint
diff --git a/webcomponents/vectortile-view-component/.prettierrc.json b/webcomponents/vectortile-view-component/.prettierrc.json
index a40112f4..4dde0258 100644
--- a/webcomponents/vectortile-view-component/.prettierrc.json
+++ b/webcomponents/vectortile-view-component/.prettierrc.json
@@ -7,7 +7,7 @@
   "arrowParens": "avoid",
   "trailingComma": "es5",
   "bracketSameLine": true,
-  "printWidth": 80,
+  "printWidth": 140,
   "endOfLine": "auto",
   "overrides": [
     {
diff --git a/webcomponents/vectortile-view-component/README.md b/webcomponents/vectortile-view-component/README.md
index ca54a06f..aa90dbe3 100644
--- a/webcomponents/vectortile-view-component/README.md
+++ b/webcomponents/vectortile-view-component/README.md
@@ -11,19 +11,10 @@ Embed the webcomponent 'app-vectortile-view' in your web application
 - load styles and javascript in your html
 
   ```html
-  <link
-    rel="stylesheet"
-    type="text/css"
-    href="vectortile-view-component/styles.css" />
-  <script
-    type="text/javascript"
-    src="vectortile-view-component/main.js"></script>
-  <script
-    type="text/javascript"
-    src="vectortile-view-component/polyfills.js"></script>
-  <script
-    type="text/javascript"
-    src="vectortile-view-component/runtime.js"></script>
+  <link rel="stylesheet" type="text/css" href="vectortile-view-component/styles.css" />
+  <script type="text/javascript" src="vectortile-view-component/main.js"></script>
+  <script type="text/javascript" src="vectortile-view-component/polyfills.js"></script>
+  <script type="text/javascript" src="vectortile-view-component/runtime.js"></script>
 
   <app-vectortile-view
     style="width: 800px; height: 600px;"
@@ -37,17 +28,10 @@ Embed the webcomponent 'app-vectortile-view' in your web application
 ## Embedding a vectortile legend
 
 ```html
-<link
-  rel="stylesheet"
-  type="text/css"
-  href="vectortile-view-component/styles.css" />
+<link rel="stylesheet" type="text/css" href="vectortile-view-component/styles.css" />
 <script type="text/javascript" src="vectortile-view-component/main.js"></script>
-<script
-  type="text/javascript"
-  src="vectortile-view-component/polyfills.js"></script>
-<script
-  type="text/javascript"
-  src="vectortile-view-component/runtime.js"></script>
+<script type="text/javascript" src="vectortile-view-component/polyfills.js"></script>
+<script type="text/javascript" src="vectortile-view-component/runtime.js"></script>
 
 <app-legend-view
   id="legendadminunit"
diff --git a/webcomponents/vectortile-view-component/package.json b/webcomponents/vectortile-view-component/package.json
index c3c49ba0..d25134ae 100644
--- a/webcomponents/vectortile-view-component/package.json
+++ b/webcomponents/vectortile-view-component/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "npm run format && ng build --output-hashing none",
+    "build": "npm run format && npm run lint && ng build --output-hashing none",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "deploy": "ng deploy --base-href=https://pdok.github.io/gokoala/ --name=JLSchaap --email=John.Schaap@Kadaster.nl",
diff --git a/webcomponents/vectortile-view-component/src/adminunits.html b/webcomponents/vectortile-view-component/src/adminunits.html
index ecc83e67..e479f884 100644
--- a/webcomponents/vectortile-view-component/src/adminunits.html
+++ b/webcomponents/vectortile-view-component/src/adminunits.html
@@ -62,9 +62,7 @@ <H1>administrative unit NL </H1>
 
       function seturl(projection) {
         const view = document.getElementById('adminunit');
-        const url =
-          'https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/tiles/' +
-          projection;
+        const url = 'https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/tiles/' + projection;
         view.setAttribute('tile-url', url);
         const link = document.getElementById('sample1viewlink');
         link.innerHTML = "<a href='" + url + "'> " + url + '</a>';
diff --git a/webcomponents/vectortile-view-component/src/app/app.component.html b/webcomponents/vectortile-view-component/src/app/app.component.html
index cb79c555..7b69399a 100644
--- a/webcomponents/vectortile-view-component/src/app/app.component.html
+++ b/webcomponents/vectortile-view-component/src/app/app.component.html
@@ -1,14 +1,5 @@
-<div
-  class="maparea"
-  id="map"
-  [style.width.px]="mapWidth"
-  [style.height.px]="mapHeight">
+<div class="maparea" id="map" [style.width.px]="mapWidth" [style.height.px]="mapHeight">
   <div class="toprightpanel">
-    <app-objectinfo-view
-      class="objectinfopanel"
-      id="objectinfo"
-      [feature]="curFeature"
-      *ngIf="showObjectInfo">
-    </app-objectinfo-view>
+    <app-objectinfo-view class="objectinfopanel" id="objectinfo" [feature]="curFeature" *ngIf="showObjectInfo"> </app-objectinfo-view>
   </div>
 </div>
diff --git a/webcomponents/vectortile-view-component/src/app/app.component.spec.ts b/webcomponents/vectortile-view-component/src/app/app.component.spec.ts
index 8a8a2633..a4af165e 100644
--- a/webcomponents/vectortile-view-component/src/app/app.component.spec.ts
+++ b/webcomponents/vectortile-view-component/src/app/app.component.spec.ts
@@ -24,8 +24,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain(
-      'vectortile-view-component app is running!'
-    );
+    expect(compiled.querySelector('.content span')?.textContent).toContain('vectortile-view-component app is running!');
   });
 });
diff --git a/webcomponents/vectortile-view-component/src/app/app.component.ts b/webcomponents/vectortile-view-component/src/app/app.component.ts
index 387e2720..5c99546e 100644
--- a/webcomponents/vectortile-view-component/src/app/app.component.ts
+++ b/webcomponents/vectortile-view-component/src/app/app.component.ts
@@ -16,11 +16,7 @@ import VectorTileSource from 'ol/source/VectorTile.js';
 import TileDebug from 'ol/source/TileDebug.js';
 import Map from 'ol/Map';
 import View from 'ol/View';
-import {
-  EuropeanETRS89_LAEAQuad,
-  MapProjection,
-  NetherlandsRDNewQuadDefault,
-} from './mapprojection';
+import { EuropeanETRS89_LAEAQuad, MapProjection, NetherlandsRDNewQuadDefault } from './mapprojection';
 
 import { defaults as defaultControls, FullScreen } from 'ol/control.js';
 import { applyStyle } from 'ol-mapbox-style';
@@ -41,10 +37,7 @@ import { CommonModule } from '@angular/common';
 import { Link, Matrix, MatrixsetService } from './matrixset.service';
 import { MapBrowserEvent, VectorTile } from 'ol';
 
-export type NgChanges<
-  Component extends object,
-  Props = ExcludeFunctions<Component>,
-> = {
+export type NgChanges<Component extends object, Props = ExcludeFunctions<Component>> = {
   [Key in keyof Props]: {
     previousValue: Props[Key];
     currentValue: Props[Key];
@@ -55,17 +48,11 @@ export type NgChanges<
 
 type MarkFunctionPropertyNames<Component> = {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  [Key in keyof Component]: Component[Key] extends Function | Subject<never>
-    ? never
-    : Key;
+  [Key in keyof Component]: Component[Key] extends Function | Subject<never> ? never : Key;
 };
 
-type ExcludeFunctionPropertyNames<T extends object> =
-  MarkFunctionPropertyNames<T>[keyof T];
-type ExcludeFunctions<T extends object> = Pick<
-  T,
-  ExcludeFunctionPropertyNames<T>
->;
+type ExcludeFunctionPropertyNames<T extends object> = MarkFunctionPropertyNames<T>[keyof T];
+type ExcludeFunctions<T extends object> = Pick<T, ExcludeFunctionPropertyNames<T>>;
 
 @Component({
   selector: 'app-vectortile-view',
@@ -279,8 +266,7 @@ export class AppComponent implements OnChanges {
     });
 
     this.SetZoom(tile);
-    const mapdiv: HTMLElement =
-      this.elementRef.nativeElement.querySelector("[id='map']");
+    const mapdiv: HTMLElement = this.elementRef.nativeElement.querySelector("[id='map']");
     this.mapWidth = this.elementRef.nativeElement.offsetWidth;
     this.mapHeight = this.elementRef.nativeElement.offsetWidth * 0.75; // height = 0.75 * width creates 4:3 aspect ratio
     map.setTarget(mapdiv);
@@ -297,9 +283,7 @@ export class AppComponent implements OnChanges {
     }
 
     if (!this.centerX) {
-      console.error(
-        'No zoom center-x was provided for the app-vectortile-view'
-      );
+      console.error('No zoom center-x was provided for the app-vectortile-view');
     } else console.log('center-x=' + this.centerX);
     if (!this.centerY) {
       console.error('No center-y was provided for the app-vectortile-view');
@@ -331,11 +315,7 @@ export class AppComponent implements OnChanges {
     this.projection = new MapProjection(this.tileUrl).Projection;
     const vectorTileLayer = this.getVectortileLayer(this.projection);
     this.setStyle(vectorTileLayer);
-    let layers = [vectorTileLayer] as
-      | BaseLayer[]
-      | Collection<BaseLayer>
-      | LayerGroup
-      | undefined;
+    let layers = [vectorTileLayer] as BaseLayer[] | Collection<BaseLayer> | LayerGroup | undefined;
 
     if (this.showGrid) {
       const source = vectorTileLayer.getSource();
@@ -367,11 +347,7 @@ export class AppComponent implements OnChanges {
             vectorTileLayer.getSource()?.setUrl(this.tileUrl + this.selector);
           }
         })
-        .catch(err =>
-          console.error(
-            'error loading: ' + this.id + ' ' + this.styleUrl + ' ' + err
-          )
-        );
+        .catch(err => console.error('error loading: ' + this.id + ' ' + this.styleUrl + ' ' + err));
     } else {
       const defaultStyle = new Style({
         fill: new Fill({
@@ -414,17 +390,13 @@ export class AppComponent implements OnChanges {
       cacheSize: 0,
     });
     source.on(['tileloadend'], e => {
-      const evt: { type: 'tileloadend'; target: VectorTile; tile: VectorTile } =
-        e as never;
+      const evt: { type: 'tileloadend'; target: VectorTile; tile: VectorTile } = e as never;
       this.activeTileUrl.next(evt.tile.key);
     });
     return source;
   }
 
   isFullURL(url: string): boolean {
-    return (
-      url.toLowerCase().startsWith('http://') ||
-      url.toLowerCase().startsWith('https://')
-    );
+    return url.toLowerCase().startsWith('http://') || url.toLowerCase().startsWith('https://');
   }
 }
diff --git a/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.html b/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.html
index ed1ae55e..90c7542f 100644
--- a/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.html
+++ b/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.html
@@ -1,5 +1 @@
-<div
-  class="legenditem"
-  id="itemmap"
-  [style.width.px]="itemWidth"
-  [style.height.px]="itemHeight"></div>
+<div class="legenditem" id="itemmap" [style.width.px]="itemWidth" [style.height.px]="itemHeight"></div>
diff --git a/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.ts b/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.ts
index 95beb09a..cd8001b3 100644
--- a/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.ts
+++ b/webcomponents/vectortile-view-component/src/app/legend-item/legend-item.component.ts
@@ -1,10 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core';
 import { Feature, Map as OLMap, Tile, VectorTile, View } from 'ol';
 import { Projection } from 'ol/proj';
 import { MVT } from 'ol/format';
@@ -12,13 +6,7 @@ import VectorTileSource from 'ol/source/VectorTile.js';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import { getCenter } from 'ol/extent';
 import { Geometry, LineString, Point } from 'ol/geom';
-import {
-  exhaustiveGuard,
-  LayerType,
-  LegendItem,
-  MapboxStyle,
-  MapboxStyleService,
-} from '../mapbox-style.service';
+import { exhaustiveGuard, LayerType, LegendItem, MapboxStyle, MapboxStyleService } from '../mapbox-style.service';
 import { applyStyle } from 'ol-mapbox-style';
 import { fromExtent } from 'ol/geom/Polygon';
 
@@ -90,13 +78,7 @@ export class LegendItemComponent implements OnInit {
     resolutions.push(1);
     const sources = this.mapboxStyleService.getLayersids(this.mapboxStyle);
 
-    applyStyle(
-      this.cvectorLayer,
-      this.mapboxStyle,
-      sources,
-      undefined,
-      resolutions
-    )
+    applyStyle(this.cvectorLayer, this.mapboxStyle, sources, undefined, resolutions)
       .then(() => {
         console.log(' loading legend style');
       })
@@ -105,8 +87,7 @@ export class LegendItemComponent implements OnInit {
         console.error('error loading legend style: ' + ' ' + err);
       });
     this.cvectorLayer.getSource()?.refresh();
-    const mapdiv: HTMLElement =
-      this.elementRef.nativeElement.querySelector("[id='itemmap']");
+    const mapdiv: HTMLElement = this.elementRef.nativeElement.querySelector("[id='itemmap']");
     this.map.setTarget(mapdiv);
   }
 
diff --git a/webcomponents/vectortile-view-component/src/app/legend-view/legend-view.component.ts b/webcomponents/vectortile-view-component/src/app/legend-view/legend-view.component.ts
index 71b3761c..02bfdc14 100644
--- a/webcomponents/vectortile-view-component/src/app/legend-view/legend-view.component.ts
+++ b/webcomponents/vectortile-view-component/src/app/legend-view/legend-view.component.ts
@@ -1,19 +1,8 @@
-import {
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  OnInit,
-  ViewEncapsulation,
-} from '@angular/core';
+import { Component, ElementRef, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { LegendItemComponent } from '../legend-item/legend-item.component';
 import { recordStyleLayer } from 'ol-mapbox-style';
-import {
-  LegendItem,
-  MapboxStyle,
-  MapboxStyleService,
-} from '../mapbox-style.service';
+import { LegendItem, MapboxStyle, MapboxStyleService } from '../mapbox-style.service';
 import { NgChanges } from '../app.component';
 
 @Component({
@@ -45,9 +34,7 @@ export class LegendViewComponent implements OnInit, OnChanges {
       }
     }
     if (this.titleItems) {
-      if (
-        changes.titleItems.previousValue !== changes.titleItems.currentValue
-      ) {
+      if (changes.titleItems.previousValue !== changes.titleItems.currentValue) {
         if (!changes.titleItems.isFirstChange()) {
           this.generateLegend();
         }
@@ -65,17 +52,9 @@ export class LegendViewComponent implements OnInit, OnChanges {
         this.mapboxStyle = this.mapboxStyleService.removeRasterLayers(style);
         if (this.titleItems) {
           const titlepart = this.titleItems.split(',');
-          this.LegendItems = this.mapboxStyleService.getItems(
-            this.mapboxStyle,
-            this.mapboxStyleService.customTitle,
-            titlepart
-          );
+          this.LegendItems = this.mapboxStyleService.getItems(this.mapboxStyle, this.mapboxStyleService.customTitle, titlepart);
         } else {
-          this.LegendItems = this.mapboxStyleService.getItems(
-            this.mapboxStyle,
-            this.mapboxStyleService.capitalizeFirstLetter,
-            []
-          );
+          this.LegendItems = this.mapboxStyleService.getItems(this.mapboxStyle, this.mapboxStyleService.capitalizeFirstLetter, []);
         }
       });
     } else {
diff --git a/webcomponents/vectortile-view-component/src/app/mapbox-style.service.ts b/webcomponents/vectortile-view-component/src/app/mapbox-style.service.ts
index 5846a83b..fd3a65e6 100644
--- a/webcomponents/vectortile-view-component/src/app/mapbox-style.service.ts
+++ b/webcomponents/vectortile-view-component/src/app/mapbox-style.service.ts
@@ -94,11 +94,7 @@ export enum LayerType {
 }
 
 export function exhaustiveGuard(_value: never): never {
-  throw new Error(
-    `ERROR! Reached forbidden guard function with unexpected value: ${JSON.stringify(
-      _value
-    )}`
-  );
+  throw new Error(`ERROR! Reached forbidden guard function with unexpected value: ${JSON.stringify(_value)}`);
 }
 
 @Injectable({
@@ -132,15 +128,11 @@ export class MapboxStyleService {
   }
 
   removeRasterLayers(style: MapboxStyle): MapboxStyle {
-    style.layers = style.layers.filter(
-      layer => layer.type !== LayerType.Raster
-    );
+    style.layers = style.layers.filter(layer => layer.type !== LayerType.Raster);
     return style;
   }
 
-  isFillPatternWithStops(
-    paint: string | FillPattern | undefined
-  ): paint is FillPattern {
+  isFillPatternWithStops(paint: string | FillPattern | undefined): paint is FillPattern {
     return (paint as FillPattern).stops !== undefined;
   }
 
@@ -155,9 +147,7 @@ export class MapboxStyleService {
       const p: IProperties = extractPropertiesFromFilter({}, layer.filter);
 
       if (layer.layout?.['text-field']) {
-        const label = layer.layout?.['text-field']
-          .replace('{', '')
-          .replace('}', '');
+        const label = layer.layout?.['text-field'].replace('{', '').replace('}', '');
         p['' + label + ''] = label.substring(0, 6);
       }
       let title = titleFunction(layer['source-layer'], p, customTitlePart);
@@ -188,11 +178,7 @@ export class MapboxStyleService {
     return [...str][0].toUpperCase() + str.slice(1);
   }
 
-  customTitle(
-    layername: string,
-    props: IProperties,
-    customTitlePart: string[]
-  ): string {
+  customTitle(layername: string, props: IProperties, customTitlePart: string[]): string {
     function gettext(intitle: string, index: string): string {
       if (props[index]) {
         return intitle + ' ' + props[index];
@@ -212,12 +198,7 @@ export class MapboxStyleService {
     return [...title][0].toUpperCase() + title.slice(1);
   }
 
-  private pushItem(
-    title: string,
-    layer: Layer,
-    names: LegendItem[],
-    properties: IProperties = {}
-  ) {
+  private pushItem(title: string, layer: Layer, names: LegendItem[], properties: IProperties = {}) {
     if (!names.find(e => e.title === title)) {
       const i: LegendItem = {
         name: layer.id,
diff --git a/webcomponents/vectortile-view-component/src/app/mapprojection.ts b/webcomponents/vectortile-view-component/src/app/mapprojection.ts
index 613eb3ee..ac52e005 100644
--- a/webcomponents/vectortile-view-component/src/app/mapprojection.ts
+++ b/webcomponents/vectortile-view-component/src/app/mapprojection.ts
@@ -35,10 +35,7 @@ export class MapProjection {
     const mercator = new Projection({
       code: 'EPSG:3857',
       units: 'm',
-      extent: [
-        -20037508.342789244, -20037508.342789244, 20037508.342789244,
-        20037508.342789244,
-      ],
+      extent: [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244],
       worldExtent: [-180, -85, 180, 85],
       axisOrientation: 'enu',
       global: true,
diff --git a/webcomponents/vectortile-view-component/src/index.html b/webcomponents/vectortile-view-component/src/index.html
index 78d22dda..294bed2c 100644
--- a/webcomponents/vectortile-view-component/src/index.html
+++ b/webcomponents/vectortile-view-component/src/index.html
@@ -114,12 +114,7 @@ <H2>2. LD proxy <a href="https://demo.ldproxy.net/daraa/">Dalaraa</a> </H2>
       });
     </script>
 
-    <H2
-      >3.
-      <a href="https://api.pdok.nl/lv/bag/ogc/v1_0/tiles/WebMercatorQuad">
-        BAG WebMercato with grid
-      </a></H2
-    >
+    <H2>3. <a href="https://api.pdok.nl/lv/bag/ogc/v1_0/tiles/WebMercatorQuad"> BAG WebMercato with grid </a></H2>
     <app-vectortile-view
       id="sample3a"
       class="showbox"
@@ -171,10 +166,7 @@ <H2>4. BAG WebMercato with style</H2>
           if (event.target.id !== 'sample4-select') return;
           var projection = event.target.value;
 
-          view.setAttribute(
-            'tile-url',
-            'https://api.pdok.nl/lv/bag/ogc/v1_0/tiles/' + projection
-          );
+          view.setAttribute('tile-url', 'https://api.pdok.nl/lv/bag/ogc/v1_0/tiles/' + projection);
           const link = document.getElementById('sample4viewlink');
           const url = 'https://api.pdok.nl/lv/bag/ogc/v1_0/tiles/' + projection;
           link.innerHTML = "<a href='" + url + "'> " + url + '</a>';
@@ -205,9 +197,7 @@ <H1>administrative unit NL </H1>
         <select id="admin-selector" style="width: 15%">
           <option value="NetherlandsRDNewQuad">NetherlandsRDNewQuad</option>
           <option value="WebMercatorQuad">WebMercatorQuad</option>
-          <option value="EuropeanETRS89_LAEAQuad">
-            EuropeanETRS89_LAEAQuad
-          </option>
+          <option value="EuropeanETRS89_LAEAQuad">EuropeanETRS89_LAEAQuad</option>
         </select>
       </div>
 
@@ -251,9 +241,7 @@ <H1>administrative unit NL </H1>
 
           function seturl(projection) {
             const view = document.getElementById('adminunit');
-            const url =
-              'https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/tiles/' +
-              projection;
+            const url = 'https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1_0-preprod/tiles/' + projection;
             view.setAttribute('tile-url', url);
             const link = document.getElementById('sample1viewlink');
             link.innerHTML = "<a href='" + url + "'> " + url + '</a>';
@@ -269,16 +257,11 @@ <H2>Admin unit legend</H2>
     </app-legend-view>
 
     <H2>9. BAG legend sample1 from OGC api test</H2>
-    <app-legend-view
-      id="legendview1"
-      style-url="https://api.pdok.nl/lv/bag/ogc/v1_0/styles/bag_standaardvisualisatie?f=json">
+    <app-legend-view id="legendview1" style-url="https://api.pdok.nl/lv/bag/ogc/v1_0/styles/bag_standaardvisualisatie?f=json">
     </app-legend-view>
 
     <H2>10 legend sample</H2>
-    <app-legend-view
-      id="legendview2"
-      style-url="https://demo.ldproxy.net/daraa/styles/topographic-with-basemap?f=mbs">
-    </app-legend-view>
+    <app-legend-view id="legendview2" style-url="https://demo.ldproxy.net/daraa/styles/topographic-with-basemap?f=mbs"> </app-legend-view>
 
     <H2>11 legend sample</H2>
     <app-legend-view
@@ -322,19 +305,9 @@ <H2>8. BGT mapbox style switch sample</H2>
     <div class="showarea">
       <div class="showbox">
         <label for="style">Choose a style:</label>
-        <select
-          title="select style"
-          name="styles"
-          id="sample8"
-          onInput="changeStyle()">
-          <option
-            value="https://api.pdok.nl/lv/bgt/ogc/v1_0/styles/bgt_achtergrondvisualisatie?f=mapbox">
-            Background
-          </option>
-          <option
-            value="https://api.pdok.nl/lv/bgt/ogc/v1_0/styles/bgt_standaardvisualisatie?f=mapbox">
-            Standard
-          </option>
+        <select title="select style" name="styles" id="sample8" onInput="changeStyle()">
+          <option value="https://api.pdok.nl/lv/bgt/ogc/v1_0/styles/bgt_achtergrondvisualisatie?f=mapbox">Background</option>
+          <option value="https://api.pdok.nl/lv/bgt/ogc/v1_0/styles/bgt_standaardvisualisatie?f=mapbox">Standard</option>
         </select>
         <app-vectortile-view
           id="selectsample"