diff --git a/src/app/color-select-hover/color-select-hover.component.ts b/src/app/color-select-hover/color-select-hover.component.ts
index a8497d99..25c6b7de 100644
--- a/src/app/color-select-hover/color-select-hover.component.ts
+++ b/src/app/color-select-hover/color-select-hover.component.ts
@@ -1,16 +1,17 @@
-import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { LayerVectorComponent, MapComponent } from 'ngx-openlayers';
-import { Feature } from 'ol';
-import { Layer } from 'ol/layer';
-import { Fill, Stroke, Style } from 'ol/style';
+import {Component, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {LayerVectorComponent, MapComponent} from 'ngx-openlayers';
+import {Fill, Stroke, Style} from 'ol/style';
+import {pointerMove} from 'ol/events/condition';
+import {SelectEvent} from 'ol/interaction/Select';
 
 @Component({
   selector: 'app-color-select-hover',
   template: `
-    <aol-map #map (pointerMove)="changeFeatureHovered($event)" width="100%" height="100%">
+    <aol-map width="100%" height="100%">
       <aol-interaction-default></aol-interaction-default>
       <aol-control-defaults></aol-control-defaults>
-      <aol-interaction-select #select [style]="styleInteratiselected"></aol-interaction-select>
+      <aol-interaction-select [style]="styleInteractionClick" (olSelect)="onSelect($event)"></aol-interaction-select>
+      <aol-interaction-select [style]="styleInteractionHover" [condition]="pointerMove" (olSelect)="onHover($event)"></aol-interaction-select>
 
       <aol-view [zoom]="5">
         <aol-coordinate [x]="1.4886" [y]="43.5554" [srid]="'EPSG:4326'"></aol-coordinate>
@@ -19,17 +20,11 @@ import { Fill, Stroke, Style } from 'ol/style';
       <aol-layer-tile [opacity]="1"> <aol-source-osm></aol-source-osm> </aol-layer-tile>
 
       <aol-layer-group>
-        <aol-layer-vector #aoiLayerVector *ngFor="let f of features.features">
-          <aol-style *ngIf="f.id === hoveredFeatureId; else notHovered">
-            <aol-style-stroke [color]="'white'" [width]="3"></aol-style-stroke>
-            <aol-style-fill [color]="'rgba(90, 17, 26, 0.3)'"></aol-style-fill>
+        <aol-layer-vector *ngFor="let f of features.features">
+          <aol-style>
+            <aol-style-stroke [color]="'rgba(90, 17, 26)'" [width]="3"></aol-style-stroke>
+            <aol-style-fill [color]="'rgba(90, 17, 26, 0.5)'"></aol-style-fill>
           </aol-style>
-          <ng-template #notHovered>
-            <aol-style>
-              <aol-style-stroke [color]="'rgba(90, 17, 26)'" [width]="3"></aol-style-stroke>
-              <aol-style-fill [color]="'rgba(90, 17, 26, 0.5)'"></aol-style-fill>
-            </aol-style>
-          </ng-template>
           <aol-source-vector>
             <aol-feature [id]="f.id">
               <aol-geometry-polygon>
@@ -46,10 +41,7 @@ import { Fill, Stroke, Style } from 'ol/style';
   `,
 })
 export class ColorSelectHoverComponent {
-  @ViewChild('map', { static: true })
-  map: MapComponent;
-  @ViewChildren('aoiLayerVector')
-  aoiLayerVector: QueryList<LayerVectorComponent>;
+  protected readonly pointerMove = pointerMove;
 
   features = {
     type: 'FeatureCollection',
@@ -125,7 +117,7 @@ export class ColorSelectHoverComponent {
     ],
   };
 
-  styleInteratiselected = new Style({
+  styleInteractionClick = new Style({
     fill: new Fill({
       color: 'rgba(0, 153, 255, 0.1)',
     }),
@@ -135,24 +127,21 @@ export class ColorSelectHoverComponent {
     }),
   });
 
-  hoveredFeatureId;
+  styleInteractionHover = new Style({
+    fill: new Fill({
+      color: 'rgba(47,255,0,0.1)',
+    }),
+    stroke: new Stroke({
+      color: 'rgb(238,255,0)',
+      width: 3,
+    }),
+  });
 
-  changeFeatureHovered(event): void {
-    const hit: Feature = this.map.instance.forEachFeatureAtPixel(event.pixel, (f) => f, {
-      layerFilter: inLayer(...this.aoiLayerVector.toArray()),
-      hitTolerance: 10,
-    }) as Feature;
+  onHover(event: SelectEvent): void {
+    console.log(event);
+  }
 
-    if (!hit && this.hoveredFeatureId) {
-      this.hoveredFeatureId = null;
-    }
-    if (hit && hit.getId() !== this.hoveredFeatureId) {
-      this.hoveredFeatureId = hit.getId();
-    }
+  onSelect(event: SelectEvent): void {
+    console.log(event);
   }
 }
-
-const inLayer =
-  (...layers: LayerVectorComponent[]): ((l: Layer) => boolean) =>
-  (l: Layer) =>
-    layers.some((layer) => layer.instance === l);
diff --git a/src/app/cursor-position/cursor-position.component.ts b/src/app/cursor-position/cursor-position.component.ts
index 1be438e0..e7954a7f 100644
--- a/src/app/cursor-position/cursor-position.component.ts
+++ b/src/app/cursor-position/cursor-position.component.ts
@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
-import { transform } from 'ol/proj';
+import {createStringXY, toStringHDMS, toStringXY} from 'ol/coordinate';
 
 @Component({
   selector: 'app-cursor-position',
   template: `
-    <aol-map #map width="100%" height="100%" (pointerMove)="dispatchCursor($event)">
+    <aol-map width="100%" height="100%">
       <aol-interaction-default></aol-interaction-default>
       <aol-control-defaults></aol-control-defaults>
+      <aol-control-mouseposition projection="EPSG:4326" [coordinateFormat]="toStringXY"></aol-control-mouseposition>
 
       <aol-view [zoom]="14">
         <aol-coordinate [x]="1.4886" [y]="43.5554" [srid]="'EPSG:4326'"></aol-coordinate>
@@ -15,56 +16,20 @@ import { transform } from 'ol/proj';
       <aol-layer-tile [opacity]="1"> <aol-source-osm></aol-source-osm> </aol-layer-tile>
     </aol-map>
 
-    <div class="info">
-      <div class="cursor-coordinates">
-        <h3>Cursor coordinates</h3>
-        <span>Longitude: {{ lonToString(lon) }}</span> <span>Latitude: {{ latToString(lat) }}</span>
-      </div>
-    </div>
   `,
   styles: [
     `
       :host {
         height: 100%;
-        display: flex;
       }
 
       aol-map {
-        width: 70%;
-      }
-
-      .info {
-        width: 28%;
-        padding: 1rem;
-      }
-
-      .cursor-coordinates {
-        display: flex;
-        flex-direction: column;
+        width: 100%;
+        position: relative;
       }
     `,
   ],
 })
 export class CursorPositionComponent {
-  lon = 0;
-  lat = 0;
-
-  dispatchCursor(event): void {
-    const coordinates = event.coordinate;
-    this.lon = transform(coordinates, 'EPSG:3857', 'EPSG:4326')[0];
-    this.lat = transform(coordinates, 'EPSG:3857', 'EPSG:4326')[1];
-  }
-
-  latToString(lat: number): string {
-    return toSexagesimal(lat, '', '-');
-  }
-
-  lonToString(lon: number): string {
-    return toSexagesimal(lon, '', '-');
-  }
+  protected readonly toStringXY = (coord) => toStringXY(coord, 4);
 }
-
-const toSexagesimal = (value: number, positiveSuffix: string, negativeSuffix: string): string => {
-  const modValue = ((value + 180) % 360) - 180;
-  return (modValue > 0 ? positiveSuffix : negativeSuffix) + Math.abs(modValue).toFixed(6);
-};
diff --git a/src/app/display-geojson-source/display-geojson-source.component.ts b/src/app/display-geojson-source/display-geojson-source.component.ts
index 8058fa30..5df7fa51 100644
--- a/src/app/display-geojson-source/display-geojson-source.component.ts
+++ b/src/app/display-geojson-source/display-geojson-source.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-display-geojson-source',
@@ -15,17 +15,12 @@ import { Component } from '@angular/core';
 
       <aol-layer-group>
         <aol-layer-vector>
-          <aol-source-vector>
-            <aol-feature>
-              <aol-source-geojson
-                [url]="'https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json'"
-              >
-              </aol-source-geojson>
-            </aol-feature>
-          </aol-source-vector>
+          <aol-source-geojson [url]="'https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json'">
+          </aol-source-geojson>
         </aol-layer-vector>
       </aol-layer-group>
     </aol-map>
   `,
 })
-export class DisplayGeojsonSourceComponent {}
+export class DisplayGeojsonSourceComponent {
+}
diff --git a/src/app/display-geometry/display-geometry.component.ts b/src/app/display-geometry/display-geometry.component.ts
index cc797a53..2a6baf11 100644
--- a/src/app/display-geometry/display-geometry.component.ts
+++ b/src/app/display-geometry/display-geometry.component.ts
@@ -14,98 +14,86 @@ import { Component } from '@angular/core';
       <aol-layer-group>
         <aol-layer-vector *ngFor="let feature of features" [ngSwitch]="feature.geometry.type">
           <aol-source-vector *ngSwitchCase="'Polygon'">
-            <aol-style>
-              <aol-style-stroke [color]="'rgba(90, 17, 26)'" [width]="3"></aol-style-stroke>
-              <aol-style-fill [color]="'rgba(90, 17, 26, 0.5)'"></aol-style-fill>
-            </aol-style>
-            <aol-feature>
-              <aol-geometry-polygon>
-                <aol-collection-coordinates [coordinates]="$any(feature.geometry.coordinates)" [srid]="'EPSG:4326'">
-                </aol-collection-coordinates>
-              </aol-geometry-polygon>
-            </aol-feature>
-          </aol-source-vector>
-
-          <aol-source-vector *ngSwitchCase="'Point'">
-            <aol-feature>
-              <aol-geometry-point>
-                <aol-coordinate
-                  [x]="$any(feature.geometry.coordinates[0])"
-                  [y]="$any(feature.geometry.coordinates[1])"
-                  [srid]="'EPSG:4326'"
-                >
-                </aol-coordinate>
-                <aol-style>
-                  <aol-style-circle [radius]="10">
-                    <aol-style-stroke [color]="'black'" [width]="5"></aol-style-stroke>
-                    <aol-style-fill [color]="'green'"></aol-style-fill>
-                  </aol-style-circle>
-                </aol-style>
-              </aol-geometry-point>
-            </aol-feature>
-          </aol-source-vector>
-
-          <aol-source-vector *ngSwitchCase="'LineString'">
-            <aol-feature>
-              <aol-geometry-linestring>
-                <aol-collection-coordinates [coordinates]="$any(feature.geometry.coordinates)" [srid]="'EPSG:4326'">
-                </aol-collection-coordinates>
-              </aol-geometry-linestring>
-            </aol-feature>
-          </aol-source-vector>
-
-          <aol-source-vector *ngSwitchCase="'Circle'">
-            <aol-feature>
-              <aol-geometry-circle [radius]="feature.geometry.radius">
-                <aol-coordinate
-                  [x]="$any(feature.geometry.coordinates[0])"
-                  [y]="$any(feature.geometry.coordinates[1])"
-                  srid="EPSG:4326"
-                >
-                </aol-coordinate>
-                <aol-style>
-                  <aol-style-stroke color="blue" [width]="2"></aol-style-stroke>
-                  <aol-style-fill color="rgba(255, 255, 0, 0.5)"></aol-style-fill>
-                </aol-style>
-              </aol-geometry-circle>
-            </aol-feature>
-          </aol-source-vector>
-
-          <aol-source-vector *ngSwitchCase="'MultiPoint'">
-            <aol-feature>
-              <aol-geometry-multipoint>
-                <aol-collection-coordinates [coordinates]="$any(feature.geometry.coordinates)" [srid]="'EPSG:4326'">
-                </aol-collection-coordinates>
-                <aol-style>
-                  <aol-style-circle [radius]="5">
-                    <aol-style-stroke [color]="'black'" [width]="5"></aol-style-stroke>
-                    <aol-style-fill [color]="'green'"></aol-style-fill>
-                  </aol-style-circle>
-                </aol-style>
-              </aol-geometry-multipoint>
-            </aol-feature>
-          </aol-source-vector>
-
-          <aol-source-vector *ngSwitchCase="'MultiLineString'">
-            <aol-feature>
-              <aol-geometry-multilinestring>
-                <aol-collection-coordinates [coordinates]="$any(feature.geometry.coordinates)" [srid]="'EPSG:4326'">
-                </aol-collection-coordinates>
-              </aol-geometry-multilinestring>
-            </aol-feature>
-          </aol-source-vector>
-
-          <aol-source-vector *ngSwitchCase="'MultiPolygon'">
-            <aol-style>
-              <aol-style-stroke [color]="'rgba(81, 15.3, 23.4)'" [width]="2"></aol-style-stroke>
-              <aol-style-fill [color]="'rgba(81, 15.3, 23.4, 0.4)'"></aol-style-fill>
-            </aol-style>
-            <aol-feature>
-              <aol-geometry-multipolygon>
-                <aol-collection-coordinates [coordinates]="$any(feature.geometry.coordinates)" [srid]="'EPSG:4326'">
-                </aol-collection-coordinates>
-              </aol-geometry-multipolygon>
-            </aol-feature>
+            @for (feature of features; track $index) {
+                <aol-feature>
+                  @switch (feature.geometry.type) {
+                    @case ('Polygon') {
+                      <aol-style>
+                        <aol-style-stroke [color]="'rgba(90, 17, 26)'" [width]="3"></aol-style-stroke>
+                        <aol-style-fill [color]="'rgba(90, 17, 26, 0.5)'"></aol-style-fill>
+                      </aol-style>
+                      <aol-geometry-polygon>
+                        <aol-collection-coordinates [coordinates]="$any(feature.geometry.coordinates)" [srid]="'EPSG:4326'">
+                        </aol-collection-coordinates>
+                      </aol-geometry-polygon>
+                    }
+                    @case ('Point') {
+                      <aol-geometry-point>
+                        <aol-coordinate
+                          [x]="$any(feature.geometry.coordinates[0])"
+                          [y]="$any(feature.geometry.coordinates[1])"
+                          [srid]="'EPSG:4326'"
+                        >
+                        </aol-coordinate>
+                        <aol-style>
+                          <aol-style-circle [radius]="10">
+                            <aol-style-stroke [color]="'black'" [width]="5"></aol-style-stroke>
+                            <aol-style-fill [color]="'green'"></aol-style-fill>
+                          </aol-style-circle>
+                        </aol-style>
+                      </aol-geometry-point>
+                    }
+                    @case('LineString') {
+                      <aol-geometry-linestring>
+                        <aol-collection-coordinates [coordinates]="$any(feature.geometry.coordinates)" [srid]="'EPSG:4326'">
+                        </aol-collection-coordinates>
+                      </aol-geometry-linestring>
+                    }
+                    @case ('Circle') {
+                      <aol-geometry-circle [radius]="feature.geometry.radius">
+                        <aol-coordinate
+                          [x]="$any(feature.geometry.coordinates[0])"
+                          [y]="$any(feature.geometry.coordinates[1])"
+                          srid="EPSG:4326"
+                        >
+                        </aol-coordinate>
+                        <aol-style>
+                          <aol-style-stroke color="blue" [width]="2"></aol-style-stroke>
+                          <aol-style-fill color="rgba(255, 255, 0, 0.5)"></aol-style-fill>
+                        </aol-style>
+                      </aol-geometry-circle>
+                    }
+                    @case ('MultiPoint') {
+                      <aol-geometry-multipoint>
+                        <aol-collection-coordinates [coordinates]="$any(feature.geometry.coordinates)" [srid]="'EPSG:4326'">
+                        </aol-collection-coordinates>
+                        <aol-style>
+                          <aol-style-circle [radius]="5">
+                            <aol-style-stroke [color]="'black'" [width]="5"></aol-style-stroke>
+                            <aol-style-fill [color]="'green'"></aol-style-fill>
+                          </aol-style-circle>
+                        </aol-style>
+                      </aol-geometry-multipoint>
+                    }
+                    @case ('MultiLineString') {
+                      <aol-geometry-multilinestring>
+                        <aol-collection-coordinates [coordinates]="$any(feature.geometry.coordinates)" [srid]="'EPSG:4326'">
+                        </aol-collection-coordinates>
+                      </aol-geometry-multilinestring>
+                    }
+                    @case ('MultiPolygon') {
+                      <aol-style>
+                        <aol-style-stroke [color]="'rgba(81, 15.3, 23.4)'" [width]="2"></aol-style-stroke>
+                        <aol-style-fill [color]="'rgba(81, 15.3, 23.4, 0.4)'"></aol-style-fill>
+                      </aol-style>
+                      <aol-geometry-multipolygon>
+                        <aol-collection-coordinates [coordinates]="$any(feature.geometry.coordinates)" [srid]="'EPSG:4326'">
+                        </aol-collection-coordinates>
+                      </aol-geometry-multipolygon>
+                    }
+                  }
+                </aol-feature>
+            }
           </aol-source-vector>
         </aol-layer-vector>
       </aol-layer-group>