refactor: demo-maps projection example and add new projection for Swiss

Author: boeckMt

CHANGELOG.md

@@ -24,13 +24,11 @@
 ### Bug Fixes
 * **@dlr-eoc/map-maplibre:**
 - Fix type errors on `setData` and test for string if kml.
+- Replaced `TypedStyleLayer` with `StyleLayer` because `TypedStyleLayer` is not exported anymore.
 
 * **@dlr-eoc/ngx-ukis-ui-clarity:**
 - Add missing code for `<ngx-ukis-global-alert>`, `<ngx-ukis-global-progress>` and `<ngx-ukis-header>`. This was lost by the conversion from `@dlr-eoc/core-ui` to `@dlr-eoc/ngx-ukis-ui-clarity`.
 
-* **@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/demo-maps/src/app/route-components/route-example-projection/route-map2.component.html

@@ -14,6 +14,8 @@
     <cds-icon shape="map" clrVerticalNavIcon></cds-icon>
     Projection
     <clr-vertical-nav-group-children class="padding title-ellipsis">
+      On change, the map will fit to the new Projection extent. See "fitViewToNewExtent" Input
+      <p></p>
       <ukis-projection-switch [mapSvc]="mapSvc" [projectionList]="projections" [fitViewToNewExtent]="true"></ukis-projection-switch>
     </clr-vertical-nav-group-children>
   </clr-vertical-nav-group>

projects/demo-maps/src/app/route-components/route-example-projection/route-map2.component.ts

@@ -62,15 +62,35 @@ export class RouteMap2Component implements OnInit {
       units: 'm'
     };
 
-    this.projections = [webMercator, arcticPolarStereographic, antarcticPolarStereographic];
+    const SwissCH1903: IProjDef = {
+      code: `EPSG:21781`,
+      proj4js: '+proj=somerc +lat_0=46.9524055555556 +lon_0=7.43958333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs +type=crs',
+      title: 'Swiss CH1903 / LV03',
+      extent: [484273.3, 73150.16, 837939.88, 299970.97],
+      worldExtent: [5.95, 45.81, 10.5, 47.81],
+      global: false,
+      units: 'm'
+    };
+
+    this.projections = [webMercator, arcticPolarStereographic, antarcticPolarStereographic, SwissCH1903];
     this.addOverlays();
-    /** set map extent or IMapState (zoom, center...) with the MapStateService */
-    this.mapStateSvc.setExtent([-14, 33, 40, 57]);
+    /** 
+       * set map extent or IMapState (zoom, center...) with the MapStateService 
+       * Check if the Extent is valid for the set projection.
+       */
+      this.mapStateSvc.setExtent([-14, 33, 40, 57]);
 
   }
 
 
   ngOnInit(): void {
+    this.mapStateSvc.getMapState().subscribe(state => {
+      console.log('MapState change', state);
+    });
+
+    this.mapSvc.projectionChange.subscribe(proj => {
+      console.log('Map Proj change', proj);
+    });
   }
 
   addOverlays() {