fix (map-maplibre): replaced TypedStyleLayer with StyleLayer

Author: boeckMt

CHANGELOG.md

@@ -13,6 +13,9 @@
  - Removed `pipes` and moved it to new library `@dlr-eoc/ngx-ukis-utilities` [Issue #267](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/267).
 
 ### Bug Fixes
+* **@dlr-eoc/map-maplibre:**
+- Replaced `TypedStyleLayer` with `StyleLayer` because `TypedStyleLayer` is not exported anymore.
+
 * **@dlr-eoc/services-ogc:**
 * **@dlr-eoc/utils-ogc:**
 * **@dlr-eoc/demo-maps:**

projects/map-maplibre/src/lib/map-maplibre.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewChecked, AfterViewInit, Component, ElementRef, Input, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Map as glMap, MapLibreEvent, NavigationControl, ScaleControl, StyleSpecification, TypedStyleLayer, GeoJSONSource, Evented, addSourceType } from 'maplibre-gl';
+import { Map as glMap, MapLibreEvent, NavigationControl, ScaleControl, StyleSpecification, StyleLayer, GeoJSONSource, Evented, addSourceType } from 'maplibre-gl';
 import { setExtent, setCenter, setZoom, getExtent, getAllLayers, getUkisLayerIDs, removeLayerAndSource, changeOrderOfLayers, setRotation, setPitch, getRotation, getUkisLayerMetadata, UKIS_METADATA } from './maplibre.helpers';
 
 import { MapState, MapStateService } from '@dlr-eoc/services-map-state';
@@ -393,7 +393,7 @@ export class MapMaplibreComponent implements OnInit, AfterViewInit, AfterViewChe
 
     for (const layer of layers) {
       const mllayers = getAllLayers(this.map).filter(l => {
-        const ukismetadata = getUkisLayerMetadata(l as TypedStyleLayer)
+        const ukismetadata = getUkisLayerMetadata(l as StyleLayer)
         return ukismetadata[UKIS_METADATA.layerID] === layer.id;
       }).map(l => this.map.getLayer(l.id)).filter(l => l);
 

projects/map-maplibre/src/lib/map-maplibre.service.spec.ts

@@ -233,7 +233,7 @@ describe('MapMaplibreService', () => {
   });
 
 
-  it('should update a TypedStyleLayer with updateMlLayer', () => {
+  it('should update a StyleLayer with updateMlLayer', () => {
     const layers = [ukisGeoJson];
     const filtertype = 'Layers';
     service.setUkisLayers(layers, filtertype, map);

projects/map-maplibre/src/lib/map-maplibre.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import {
   Layer as ukisLayer, TFiltertypesUncap, TFiltertypes,
 } from '@dlr-eoc/services-layers';
-import { Map as glMap, StyleSpecification, TypedStyleLayer } from 'maplibre-gl';
+import { Map as glMap, StyleSpecification, StyleLayer } from 'maplibre-gl';
 import { BehaviorSubject } from 'rxjs';
 import { LayerSourceSpecification, UKIS_METADATA } from './maplibre.helpers';
 import { createLayer, layerIsSupported, updateSource, updateStyleLayerProperties } from './maplibre-layers.helpers';
@@ -112,7 +112,7 @@ export class MapMaplibreService {
   public getLayers(filtertype: Tgroupfiltertype, map: glMap) {
     const style = map.getStyle();
     const layerSpecifications = style.layers.filter(l => l.metadata[UKIS_METADATA.filtertype] === filtertype);
-    const styleLayers = layerSpecifications.map(ls => map.getLayer(ls.id)) as TypedStyleLayer[]; //Temp fix of : Property ... of exported class expression may not be private or protected
+    const styleLayers = layerSpecifications.map(ls => map.getLayer(ls.id)) as StyleLayer[]; //Temp fix of : Property ... of exported class expression may not be private or protected
 
     return {
       layerSpecifications,
@@ -132,7 +132,7 @@ export class MapMaplibreService {
     const alllayers = this.getLayers(filtertype, map);
     const layerSpecifications = alllayers.layerSpecifications.filter(l => l.metadata[UKIS_METADATA.layerID] === id);
     if (layerSpecifications.length) {
-      const styleLayers = layerSpecifications.map(ls => map.getLayer(ls.id)) as TypedStyleLayer[]; //Temp fix of : Property ... of exported class expression may not be private or protected
+      const styleLayers = layerSpecifications.map(ls => map.getLayer(ls.id)) as StyleLayer[]; //Temp fix of : Property ... of exported class expression may not be private or protected
       return {
         layerSpecifications,
         styleLayers
@@ -191,7 +191,7 @@ export class MapMaplibreService {
     return layers;
   }
 
-  public updateMlLayer(mllayer: TypedStyleLayer, layer: ukisLayer, map: glMap) {
+  public updateMlLayer(mllayer: StyleLayer, layer: ukisLayer, map: glMap) {
     /**
      * update ml layer
      * - map.setLayoutProperty() > Visibility
@@ -207,7 +207,7 @@ export class MapMaplibreService {
     updateStyleLayerProperties(map, mllayer, layer);
   }
 
-  private updateLayerParamsAndSource(map: glMap, mllayer: TypedStyleLayer, layer: ukisLayer) {
+  private updateLayerParamsAndSource(map: glMap, mllayer: StyleLayer, layer: ukisLayer) {
     if (layer.type === 'wms' || layer.type === 'wmts' || layer.type === 'tms' || layer.type === 'wfs' || layer.type === 'geojson') {
       const oldSource = map.getSource(mllayer.source);
       updateSource(map, layer, oldSource);

projects/map-maplibre/src/lib/maplibre-layers.helpers.spec.ts

@@ -4,7 +4,7 @@ import {
     createGetMapUrl, createGetTileUrl, createBaseLayer, updateStyleLayerProperties
 } from './maplibre-layers.helpers';
 import testFeatureCollection from '@dlr-eoc/shared-assets/geojson/testFeatureCollection.json';
-import { RasterSourceSpecification, StyleSpecification, TypedStyleLayer, Map as glMap } from 'maplibre-gl';
+import { RasterSourceSpecification, StyleSpecification, StyleLayer, Map as glMap } from 'maplibre-gl';
 import { UKIS_METADATA, getOpacityPaintProperty, addUkisLayerMetadata } from './maplibre.helpers';
 import { TestBed } from '@angular/core/testing';
 import { MapMaplibreService } from './map-maplibre.service';
@@ -385,7 +385,7 @@ describe('MaplibreLayerHelpers - use mapservice', () => {
         // TODO: service.setUkisLayers changes the id on the original object????
         const waterLayer = ukisCustom.custom_layer.layers.find(l => l.id === waterId);
         waterLayer.paint[paintProp] = newColor;
-        updateStyleLayerProperties(map, waterLayerBefor as TypedStyleLayer, ukisCustom)
+        updateStyleLayerProperties(map, waterLayerBefor as StyleLayer, ukisCustom)
 
         const layerAfterUpdate = service.getLayersForId(ukisCustom.id, filtertype, map).styleLayers;
         const waterLayerAfter = layerAfterUpdate.find(l => l.id === waterIdStyledObj);

projects/map-maplibre/src/lib/maplibre-layers.helpers.ts

@@ -1,6 +1,6 @@
 import {
     CircleLayerSpecification, FillLayerSpecification, GeoJSONSourceSpecification, LayerSpecification, Map as glMap,
-    LineLayerSpecification, RasterLayerSpecification, RasterSourceSpecification, SourceSpecification, StyleSpecification, SymbolLayerSpecification, TypedStyleLayer, VectorSourceSpecification, Source, FilterSpecification, DataDrivenPropertyValueSpecification,
+    LineLayerSpecification, RasterLayerSpecification, RasterSourceSpecification, SourceSpecification, StyleSpecification, SymbolLayerSpecification, StyleLayer, VectorSourceSpecification, Source, FilterSpecification, DataDrivenPropertyValueSpecification,
     MapGeoJSONFeature
 } from "maplibre-gl";
 import {
@@ -620,7 +620,7 @@ export function updateSource(map: glMap, layer: ukisLayer, oldSource: Source) {
     }
 }
 
-export function updateStyleLayerProperties(map: glMap, mllayer: TypedStyleLayer, layer: ukisLayer) {
+export function updateStyleLayerProperties(map: glMap, mllayer: StyleLayer, layer: ukisLayer) {
     // https://maplibre.org/maplibre-style-spec/layers/#layer-properties
     // paint -> map.setPaintProperty(l.id...)
     // layout -> map.setLayoutProperty(l.id...)

projects/map-maplibre/src/lib/maplibre.helpers.spec.ts

@@ -1,5 +1,5 @@
 import { getOpacity, setOpacity, setVisibility, getAllLayers, getUkisLayerIDs, getLayersAndSources, removeLayerAndSource, changeOrderOfLayers, LayerSourceSpecification, setRotation, setPitch, getRotation, UKIS_METADATA, addUkisLayerMetadata, getUkisLayerMetadata, IukisMetadata, setUkisLayerMetadata } from './maplibre.helpers';
-import { StyleSpecification, LayerSpecification, SourceSpecification, Map as glMap, TypedStyleLayer } from 'maplibre-gl';
+import { StyleSpecification, LayerSpecification, SourceSpecification, Map as glMap, StyleLayer } from 'maplibre-gl';
 import { CustomLayer, Layer } from '@dlr-eoc/services-layers';
 
 const createMapTarget = (size: number[]) => {
@@ -439,7 +439,7 @@ describe('MaplibreHelpers', () => {
         map.addSource('planet_eoc', planet_eoc);
         map.addLayer(waterLayer_test);
 
-        const mapLayer = map.getLayer(waterLayer_test.id) as TypedStyleLayer;
+        const mapLayer = map.getLayer(waterLayer_test.id) as StyleLayer;
 
         const meta = getUkisLayerMetadata(mapLayer);
         expect(meta[UKIS_METADATA.ignoreOpacity]).toBe(true);

projects/map-maplibre/src/lib/maplibre.helpers.ts

@@ -1,5 +1,5 @@
 
-import { Map as glMap, LngLatBounds, LngLat, LayerSpecification, TypedStyleLayer, SourceSpecification } from 'maplibre-gl';
+import { Map as glMap, LngLatBounds, LngLat, LayerSpecification, StyleLayer, SourceSpecification } from 'maplibre-gl';
 import { TGeoExtent, Layer as ukisLayer, TFiltertypes, TFiltertypesUncap } from '@dlr-eoc/services-layers';
 
 /** Layers can consist of multiple layers and sources, e.g. if they are a VectorTileLayer - StyleSpecification   */
@@ -30,7 +30,7 @@ export function addUkisLayerMetadata(l: ukisLayer) {
     return metadata;
 }
 
-export function getUkisLayerMetadata(ml: TypedStyleLayer) {
+export function getUkisLayerMetadata(ml: StyleLayer) {
     const metadata: Partial<IukisMetadata> = {};
     metadata[UKIS_METADATA.filtertype] = (ml?.metadata as any)[UKIS_METADATA.filtertype];
     metadata[UKIS_METADATA.layerID] = (ml?.metadata as any)[UKIS_METADATA.layerID];
@@ -39,7 +39,7 @@ export function getUkisLayerMetadata(ml: TypedStyleLayer) {
     return metadata;
 }
 
-export function setUkisLayerMetadata(ml: TypedStyleLayer, meta: Partial<IukisMetadata>) {
+export function setUkisLayerMetadata(ml: StyleLayer, meta: Partial<IukisMetadata>) {
     Object.keys(meta).forEach(k => {
         (ml?.metadata as any)[k] = meta[k];
     });
@@ -123,10 +123,10 @@ export function getRotation(map: glMap):number {
   return rotation;
 }
 
-export function setVisibility(map: glMap, layerOrId: string | TypedStyleLayer, visibility: boolean, cb?: () => void) {
+export function setVisibility(map: glMap, layerOrId: string | StyleLayer, visibility: boolean, cb?: () => void) {
     let mllayer;
     if (typeof layerOrId === 'string') {
-        mllayer = map.getLayer(layerOrId) as TypedStyleLayer | undefined;
+        mllayer = map.getLayer(layerOrId) as StyleLayer | undefined;
     } else {
         mllayer = layerOrId;
     }
@@ -152,10 +152,10 @@ export function setVisibility(map: glMap, layerOrId: string | TypedStyleLayer, v
     }
 }
 
-export function setOpacity(map: glMap, layerOrId: string | TypedStyleLayer, opacity: number, cb?: () => void) {
+export function setOpacity(map: glMap, layerOrId: string | StyleLayer, opacity: number, cb?: () => void) {
     let mllayer;
     if (typeof layerOrId === 'string') {
-        mllayer = map.getLayer(layerOrId) as TypedStyleLayer | undefined;
+        mllayer = map.getLayer(layerOrId) as StyleLayer | undefined;
     } else {
         mllayer = layerOrId;
     }
@@ -177,10 +177,10 @@ export function setOpacity(map: glMap, layerOrId: string | TypedStyleLayer, opac
     }
 }
 
-export function getOpacity(map: glMap, layerOrId: string | TypedStyleLayer) {
+export function getOpacity(map: glMap, layerOrId: string | StyleLayer) {
     let mllayer;
     if (typeof layerOrId === 'string') {
-        mllayer = map.getLayer(layerOrId) as TypedStyleLayer | undefined;
+        mllayer = map.getLayer(layerOrId) as StyleLayer | undefined;
     } else {
         mllayer = layerOrId;
     }
@@ -189,10 +189,10 @@ export function getOpacity(map: glMap, layerOrId: string | TypedStyleLayer) {
     }
 }
 
-export function getLayerbeforeId(map: glMap, layerOrId: string | TypedStyleLayer) {
+export function getLayerbeforeId(map: glMap, layerOrId: string | StyleLayer) {
     let mllayer;
     if (typeof layerOrId === 'string') {
-        mllayer = map.getLayer(layerOrId) as TypedStyleLayer | undefined;
+        mllayer = map.getLayer(layerOrId) as StyleLayer | undefined;
     } else {
         mllayer = layerOrId;
     }
@@ -209,7 +209,7 @@ export function getLayerbeforeId(map: glMap, layerOrId: string | TypedStyleLayer
 }
 
 // https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.StyleLayer/
-export function styleLayerGetOpacity(mllayer: TypedStyleLayer) {
+export function styleLayerGetOpacity(mllayer: StyleLayer) {
     let opacityPaintProperty = getOpacityPaintProperty(mllayer.type);
     return mllayer.getPaintProperty(opacityPaintProperty);
 }