dlr-eoc · lucas-angermann · Nov 14, 2024 · Nov 5, 2024 · Nov 7, 2024 · Nov 7, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,10 @@
 * **@dlr-eoc/layer-control:**
   - Fix direction of `@cds` icon
 
+### Documentation
+- Update `TUTORIALS.md`
+- Minor changes in some libraries's `README.md`
+
 
 # [14.0.0](https://github.com/dlr-eoc/ukis-frontend-libraries/tree/v14.0.0) (2024-08-05) (map-cesium, angular update, @clr and @cds update)
 

diff --git a/README.md b/README.md
@@ -82,9 +82,9 @@ Then run:
 More detailed information about setting up a local UKIS application can be found in the [tutorial document](TUTORIALS.md).
 
 
-## Team
+## UKIS contributors
 
-The UKIS team creates and adapts libraries which simplify the creation of web-based applications. Our team includes (in alphabetical order):
+The UKIS core team creates and adapts libraries which simplify the creation of web-based applications. The main contributors over the years were (in alphabetical order):
 
  - Angermann, Lucas
  - Böck, Mathias

diff --git a/TUTORIALS.md b/TUTORIALS.md
@@ -6,7 +6,7 @@ In this guide you will follow the necessary steps for creating a basic web map a
 For this tutorial to work you need a code editor of your choice (e.g. Visual Studio Code) and npm installed. 
 
 ## Setting up UKIS core-ui
-### 1. Generate a new [Angular application](https://angular.io/cli/new) in the same Version like specified in our package.json [@angular/core](package.json).
+### 1. Generate a new [Angular application](https://angular.dev/cli/new) in the same Version like specified in our package.json [@angular/core](package.json).
 For this you have to install `@angular/cli` in this specific Version first. 
 - See ukis-frontend-libraries package.json [version of @angular/core](package.json) 
 ```
@@ -32,20 +32,18 @@ npm install @cds/core@<version> @clr/angular@<version> @clr/ui@<version>
 
 - Add Clarity Styles: This is done later by adding the UKIS Theme
 
-- Add the Clarity module to app.config.ts:
+- Add the Clarity module and others to app.config.ts:
 ```
 import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { ClarityModule } from '@clr/angular'; 
-import { provideAnimations } from '@angular/platform-browser/animations'; 
+import { ClarityModule } from '@clr/angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
 import { BrowserModule } from '@angular/platform-browser';
 
-
 export const appConfig: ApplicationConfig = {
   providers: [
-    ...
-    importProvidersFrom(BrowserModule, ClarityModule, ...),
-    provideAnimations() //Replacement for BrowserAnimationsModule
-  ]
+    importProvidersFrom(BrowserModule, ClarityModule),
+    provideAnimations()
+    ]
 };
 ```
 
@@ -64,12 +62,11 @@ ClarityIcons.addIcons(...essentialCollectionIcons);
 
 - Set Clarity Theme (index.html)
 ```
-<body cds-theme="light" />
+<body cds-theme="light">
 ```
-- For more information see 
-- [Adding Clarity to an Angular project](https://clarity.design/documentation/get-started#seedProjectAngular)
-- [Step 2: Include the Clarity and Core Styles](https://clarity.design/pages/developing)
-- [Step 5: Add Clarity to Angular Application](https://clarity.design/pages/developing)
+For more information see 
+- [Getting Started with Clarity Design System](https://clarity.design/documentation/get-started#seedProjectAngular)
+- [Adding Clarity to an Existing Angular Application](https://clarity.design/pages/developing#adding-clarity-to-an-existing-angular-application)
 
 
 ### 4. Run the ng add command for the UKIS core-ui
@@ -90,20 +87,20 @@ to add files and styles from ukis-frontend-libraries in the desired version.
 ### 5. Start and view the application
 - Run `npm start`
 - Open [http://localhost:4200/](http://localhost:4200/) on a browser
-- You should now be able to see the basic application layout in the browser.
+- You should now be able to see the basic application layout (still without a map) in the browser.
 
 ## Installing map libraries
 In the following the components neccessary for the display of a web map are installed. More information can be found [in the map-ol library folder](projects/map-ol/README.md).
 ### 1. Add the following libraries:
 ```
-npm install @dlr-eoc/map-ol @dlr-eoc/base-layers-raster
+npm install @dlr-eoc/map-ol @dlr-eoc/layer-control @dlr-eoc/base-layers-raster
 ```
 
 The base layers raster library is optional, but it makes it easier to add a basemap. Without a given basemap the map canvas would be empty. 
 
 ### 2. Add styles from OpenLayers to your application
 
-e.g. in your apps style file (src/styles.css)
+e.g. in your apps style file (src/styles.scss)
 ```
 @import 'ol/ol.css';
 ...
@@ -113,8 +110,11 @@ e.g. in your apps style file (src/styles.css)
 ### 3. Add the following to example-view.component.ts:
 ```
 import { MapOlComponent, MapOlService } from '@dlr-eoc/map-ol';
-import { LayerControlComponent, LayersService } from '@dlr-eoc/layer-control';
+import { LayerControlComponent, BaseLayerControlComponent} from '@dlr-eoc/layer-control';
+import { LayersService } from '@dlr-eoc/services-layers';
 import { MapStateService } from '@dlr-eoc/services-map-state';
+import { IMapControls } from '@dlr-eoc/map-ol';
+import { OsmTileLayer, EocLitemap, BlueMarbleTile, EocLiteoverlayTile } from '@dlr-eoc/base-layers-raster';
 
 ...
 
@@ -123,74 +123,55 @@ standalone: true,
 imports: [
   ...
   MapOlComponent,
-  LayerControlComponent
+  LayerControlComponent,
+  BaseLayerControlComponent
 ]
-```
-
-### 4. Also replace the example-view.component.html with:
-```
-<section class="content-area map-view">
-  <ukis-map-ol [layersSvc]="layerSvc" [mapState]="mapStateSvc" [controls]="controls"></ukis-map-ol>
-</section>
-```
-### 5. Remove the contents of example-view.component.scss
-This is necessary, as we do not have a footer or a side nav at the moment.
 
-### 6. Add the following to example-view.component.ts:
-```
 ...
-import { IMapControls } from '@dlr-eoc/map-ol';
-import { OsmTileLayer, EocLitemap, BlueMarbleTile } from '@dlr-eoc/base-layers-raster';
 
-...
-controls: IMapControls;
-  constructor(
-    public layerSvc: LayersService,
-    public mapStateSvc: MapStateService
+controls!: IMapControls;
+constructor(
+  public layerSvc: LayersService,
+  public mapStateSvc: MapStateService
 ) { }
 
-ngOnInit() {
+ngOnInit(): void {
   this.addBaselayers();
 }
 
+...
+
 addBaselayers() {
   const layers = [
     new OsmTileLayer({
-    visible: false
+      visible: false
     }),
     new EocLitemap({
-    visible: true
+      visible: true
     }),
     new BlueMarbleTile({
-    visible: false
+      visible: false
     })
   ];
 
   layers.map(l => this.layerSvc.addLayer(l, 'Baselayers'));
 }
 ```
 
-
-- After these steps save your changes and visit your browser again. You should now see a working web map. As we have not included the layer control yet, you are only able to see the layers with visibility set to 'true'.
-
-## Adding layer controll and layers
-To enable more interaction with the application we are now adding the layer control, overlays and layers. 
-### 1. First, install the layer control library and add the module to app.module.ts:
-```
-npm install @dlr-eoc/layer-control
+### 4. Also replace the example-view.component.html with:
 ```
+<section class="content-area map-view">
+  <ukis-map-ol [layersSvc]="layerSvc" [mapState]="mapStateSvc" [controls]="controls"></ukis-map-ol>
+</section>
 ```
-import { LayerControlComponent } from '@dlr-eoc/layer-control';
+### 5. Remove the contents of example-view.component.scss
+- This is necessary, as we do not have a footer or a side nav at the moment.
 
-...
+After these steps save your changes and visit your browser again. You should now see a working web map. As we have not included the layer control html yet, you are only able to see the baselayer with visibility set to 'true'.
 
- imports: [
-    ...
-    LayerControlComponent
-  ]
-```
-More information about this library can be found [in the layer-control library folder](projects/layer-control/README.md).
-### 2. Next, include the following code in the example-view.component.html:
+## Adding layer controll and layers to the app
+To enable more interaction with the application we are now adding the layer control, overlays and layers. 
+### 1. First, add the layer control html code in the example-view.component.html:
 
 ```
 <clr-vertical-nav [clrVerticalNavCollapsible]="true" [clr-nav-level]="2" class="right">
@@ -222,14 +203,17 @@ More information about this library can be found [in the layer-control library f
 
 </clr-vertical-nav>
 ```
-### 3. Extend the following import in the example-view.component.ts:
-```
-
-import { LayersService, Layer, WmtsLayer, RasterLayer } from '@dlr-eoc/services-layers';
 
+More information about this library can be found [in the layer-control library folder](projects/layer-control/README.md).
 
+### 2. Extend the import in the example-view.component.ts:
 ```
-### 4. Add the overlays and layers next to the already existing baselayers in the example-view.component.ts:
+import { LayersService, Layer, WmtsLayer, RasterLayer } from '@dlr-eoc/services-layers';
+import { ClarityIcons, layersIcon} from '@cds/core/icon';
+ClarityIcons.addIcons(...[layersIcon]);
+```
+
+### 3. Add the overlays and layers next to the already existing baselayers in the example-view.component.ts:
 
 ```
 ngOnInit() {
@@ -278,6 +262,7 @@ addLayers() {
       params: {
         LAYERS: 'GUF28_DLR_v1_Mosaic',
         STYLES: 'guf_8bit',
+        TRANSPARENT: true
       },
       tileSize: 512,
       visible: true,
@@ -294,6 +279,7 @@ addLayers() {
       params: {
         LAYERS: 'WSF_Evolution',
         STYLES: 'wsfevolution',
+        TRANSPARENT: true
       },
       tileSize: 512,
       visible: false,
@@ -309,7 +295,7 @@ addLayers() {
 addOverlays(){
   const layers: Layer[] = [
     new EocLiteoverlayTile({
-      visible: false,
+      visible: true,
       displayName: 'Litelables'
     })
   ];
@@ -318,11 +304,11 @@ addOverlays(){
 }
 ```
 - For this tutorial we are using some example layers from the [EOC GeoService](https://geoservice.dlr.de/web/).
-- Save and refresh your changes. You can now switch between the layers, change the layer order and adjust the opacity of individual layers in the layer control. Notice, that there is always the hierachical order overlays > layers > base layers. Also, there is only one active base layer possible at a time. If you do not need a layer category, you could delete the corresponding code in example-view.component.html. 
+- Save and refresh your changes. You can now switch between the layers, change the layer order and adjust the opacity of individual layers in the layer control. Notice, that there is always the hierachical order overlays > layers > baselayers. Also, there is only one active baselayer possible at a time. If you do not need a layer category, you could hide or delete the corresponding code in example-view.component.html. 
 
 ## Optional adaptions
 We are nearly finished with our basic example application in this tutorial. In the last steps we can adjust some details in the application.
-- To change the starting view of the map, paste the following changes in example-view.component.ts:
+- To change the starting view of the map, add the following changes in example-view.component.ts:
 ```
 import { MapStateService, IMapState } from '@dlr-eoc/services-map-state';
 
@@ -349,7 +335,7 @@ controls!: IMapControls;
     this.mapStateSvc.setMapState(this.startState);
   }
 ```
-- Add some controls to the map in the example-view.component.ts:
+- To add some controls to the map, adjust the controls object in the example-view.component.ts:
 ```
 constructor(
     public layerSvc: LayersService,

diff --git a/projects/demo-auth/README.md b/projects/demo-auth/README.md
@@ -2,7 +2,7 @@
 
 This application was generated with `ng generate application demo-auth` and then `@dlr-eoc/core-ui:ng-add --routing=true` was applied.
 
-- This app depends on *@dlr-eoc/user-info*
+- This app depends on [*@dlr-eoc/user-info*](../user-info/README.md)
 - It implements an AuthGuardService to protect routes
 - BasicAuthService which implements IAuthService (your business logic for authentication and authorization)
 - HttpAuthInterceptor which uses the AuthService to add a basic token on your angular http requests

diff --git a/projects/demo-maps/README.md b/projects/demo-maps/README.md
@@ -2,13 +2,15 @@
 
 This application was generated with `ng generate application demo-maps` and then `@dlr-eoc/core-ui:ng-add --routing=true` was applied.
 
-In the src folder you can find a few route-components which show the usage of main UKIS frontend components:
+In the src folder you can find a few route-components which show the usage of main UKIS frontend components, e. g.:
 - [layers](src/app/route-components/route-example-layers/route-map.component.ts)
 - [events](src/app/route-components/route-example-events/route-map3.component.ts)
 - [layer style](src/app/route-components/route-example-layer-style/route-map6.component.ts)
 - [custom layers](src/app/route-components/route-example-custom-layers/route-map4.component.ts)
 - [layout](src/app/route-components/route-example-layout/route-map5.component.ts)
 - [map projection](src/app/route-components/route-example-projection/route-map2.component.ts)
+- [3D CesiumJS map](src/app/route-components/route-example-cesium/route-example-cesium.component.ts)
+- [maplibre map](src/app/route-components/route-example-maplibre/route-example-maplibre.component.ts)
 
 
 ## Getting started