Maplibre

CHANGELOG.md

@@ -18,6 +18,10 @@
 * **@dlr-eoc/utilities:**
   - New UKIS library export utilities for other libraries.
 
+* **@dlr-eoc/map-maplibre:**
+  - A example has been added to the demo-maps to show how to work with the new maplibre library.
+  - New UKIS library for working with [maplibre](https://maplibre.org/) was added.
+
 * **@dlr-eoc/map-cesium:**
   - New UKIS library for working with [CesiumJS](https://github.com/CesiumGS/cesium) was added.
 

package.json

@@ -135,7 +135,8 @@
     "projects/map-three",
     "projects/shared-assets",
     "projects/map-cesium",
-    "projects/utilities"
+    "projects/utilities",
+    "projects/map-maplibre"
   ],
   "engines": {
     "node": ">= 18.13.0",

projects/demo-maps/package.json

@@ -30,7 +30,8 @@
     "@dlr-eoc/utils-maps": "12.0.0-alpha.2",
     "@dlr-eoc/services-ogc": "12.0.0-alpha.2",
     "@dlr-eoc/shared-assets": "12.0.0-alpha.2",
-    "@dlr-eoc/map-cesium": "12.0.0-alpha.2"
+    "@dlr-eoc/map-cesium": "12.0.0-alpha.2",
+    "@dlr-eoc/map-maplibre": "12.0.0-alpha.2"
   },
   "devDependencies": {
     "zone.js": "^0.11.7",

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

@@ -97,6 +97,15 @@ const routes: Routes = [
       img: 'assets/route-cesium.jpg'
     }
   },
+  {
+    path: 'maplibre',
+    loadChildren: () => import('./route-components/route-example-maplibre/route-example-maplibre.module').then(m => m.RouteExampleMaplibreModule),
+    data: {
+      title: 'Maplibre',
+      description: 'This example shows a maplibre map and how to work with UKIS layers',
+      img: 'assets/route-maplibre.jpg'
+    }
+  },
   {
     path: 'licenses',
     loadChildren: () => import('./route-components/route-licenses/route-licenses.module').then(m => m.RouteLicensesModule),

projects/demo-maps/src/app/route-components/route-example-maplibre/route-example-maplibre.component.html

@@ -0,0 +1,42 @@
+<section class="content-area map-view">
+  <ukis-map-maplibre [mapState]="mapStateSvc" [layersSvc]="layerSvc"></ukis-map-maplibre>
+</section>
+
+<clr-vertical-nav class="right" [clrVerticalNavCollapsible]="true">
+
+  <clr-vertical-nav-group [clrVerticalNavGroupExpanded]="true" class="layers">
+    <clr-icon shape="world" title="Overlays" clrVerticalNavIcon></clr-icon>
+    Overlays
+    <clr-vertical-nav-group-children class="padding title-ellipsis">
+      <ukis-layer-control [layersSvc]="layerSvc" [mapStateSvc]="mapStateSvc" [layerfilter]="'Overlays'">
+      </ukis-layer-control>
+    </clr-vertical-nav-group-children>
+  </clr-vertical-nav-group>
+
+  <clr-vertical-nav-group [clrVerticalNavGroupExpanded]="true" class="layers">
+    <clr-icon shape="layers" clrVerticalNavIcon title="layers"></clr-icon>
+    Layers
+    <clr-vertical-nav-group-children class="padding title-ellipsis">
+      <ukis-layer-control [layersSvc]="layerSvc" [mapStateSvc]="mapStateSvc"></ukis-layer-control>
+    </clr-vertical-nav-group-children>
+  </clr-vertical-nav-group>
+
+  <clr-vertical-nav-group [clrVerticalNavGroupExpanded]="true" class="layers">
+    <clr-icon shape="world" title="Baselayers" clrVerticalNavIcon></clr-icon>
+    Baselayers
+    <clr-vertical-nav-group-children class="padding title-ellipsis">
+      <ukis-base-layer-control [layersSvc]="layerSvc" [mapStateSvc]="mapStateSvc"></ukis-base-layer-control>
+    </clr-vertical-nav-group-children>
+  </clr-vertical-nav-group>
+
+  <clr-vertical-nav-group [clrVerticalNavGroupExpanded]="true" class="layers">
+    <clr-icon shape="cog" title="Actions" clrVerticalNavIcon></clr-icon>
+    Actions
+    <clr-vertical-nav-group-children class="padding title-ellipsis">
+
+      <button class="btn btn-primary" (click)="updateLayer()">update Geojson Layer</button>
+
+    </clr-vertical-nav-group-children>
+  </clr-vertical-nav-group>
+
+</clr-vertical-nav>

projects/demo-maps/src/app/route-components/route-example-maplibre/route-example-maplibre.component.scss

@@ -0,0 +1 @@
+@import 'maplibre-gl/dist/maplibre-gl.css';

projects/demo-maps/src/app/route-components/route-example-maplibre/route-example-maplibre.component.spec.ts

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