+
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
,
-> = {
+export type NgChanges> = {
[Key in keyof Props]: {
previousValue: Props[Key];
currentValue: Props[Key];
@@ -55,17 +48,11 @@ export type NgChanges<
type MarkFunctionPropertyNames = {
// eslint-disable-next-line @typescript-eslint/ban-types
- [Key in keyof Component]: Component[Key] extends Function | Subject
- ? never
- : Key;
+ [Key in keyof Component]: Component[Key] extends Function | Subject ? never : Key;
};
-type ExcludeFunctionPropertyNames =
- MarkFunctionPropertyNames[keyof T];
-type ExcludeFunctions = Pick<
- T,
- ExcludeFunctionPropertyNames
->;
+type ExcludeFunctionPropertyNames = MarkFunctionPropertyNames[keyof T];
+type ExcludeFunctions = Pick>;
@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
- | LayerGroup
- | undefined;
+ let layers = [vectorTileLayer] as BaseLayer[] | Collection | 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 @@
-
+
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 @@
});
-
+
4. BAG WebMercato with style
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 = " " + url + '';
@@ -205,9 +197,7 @@ administrative unit NL