From 6fb15b7b19df7bb017b20c227944e3caa41aeb06 Mon Sep 17 00:00:00 2001
From: vmarc <marc@vmarc.be>
Date: Sat, 16 Sep 2023 13:32:34 +0200
Subject: [PATCH] #326 upgrade OpenLayers and ol-geocoder

---
 .../network/map/network-control.component.ts  | 29 ++-------------
 .../components/layer-switcher.component.ts    |  6 ++--
 .../lib/components/map-link-menu.component.ts |  8 ++++-
 .../lib/components/route-control.component.ts | 30 ++--------------
 client/libs/ol/src/lib/domain/map-geocoder.ts |  5 ++-
 .../geolocation-control.component.ts          | 36 ++-----------------
 client/package.json                           |  4 +--
 client/project.json                           |  2 +-
 client/src/styles.scss                        | 28 ++-------------
 client/yarn.lock                              | 29 +++++++--------
 10 files changed, 42 insertions(+), 135 deletions(-)

diff --git a/client/libs/analysis/src/lib/network/map/network-control.component.ts b/client/libs/analysis/src/lib/network/map/network-control.component.ts
index 9a085836af..465cb4b68f 100644
--- a/client/libs/analysis/src/lib/network/map/network-control.component.ts
+++ b/client/libs/analysis/src/lib/network/map/network-control.component.ts
@@ -7,9 +7,8 @@ import { Component } from '@angular/core';
   selector: 'kpn-network-control',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="control">
+    <div class="ol-control map-control network-control">
       <button
-        class="button"
         (click)="action.emit()"
         title="zoom to fit entire network"
         i18n-title="@@network-control.title"
@@ -21,33 +20,9 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
-      .control {
-        position: absolute;
+      .network-control {
         left: 8px;
         top: 112px;
-        z-index: 100;
-        height: 31px;
-        width: 31px;
-        padding: 2px;
-        border: 0 none white;
-        border-radius: 3px;
-        background-color: rgba(255, 255, 255, 0.5);
-      }
-
-      .button {
-        margin: 1px;
-        background-color: rgba(0, 60, 136, 0.5);
-        color: white;
-        border: 0 none white;
-        border-radius: 2px;
-        text-align: center;
-        line-height: 28px;
-        height: 28px;
-        width: 28px;
-      }
-
-      .button:hover {
-        background-color: rgba(0, 60, 136, 0.7);
       }
     `,
   ],
diff --git a/client/libs/ol/src/lib/components/layer-switcher.component.ts b/client/libs/ol/src/lib/components/layer-switcher.component.ts
index 5fcc3be83c..088efcf54e 100644
--- a/client/libs/ol/src/lib/components/layer-switcher.component.ts
+++ b/client/libs/ol/src/lib/components/layer-switcher.component.ts
@@ -43,9 +43,11 @@ import { MapLayerTranslationService } from '../services';
       </ng-template>
     </mat-menu>
 
-    <div class="map-control map-layers-control" (click)="openPopupMenu()">
+    <div
+      class="ol-control map-control map-layers-control"
+      (click)="openPopupMenu()"
+    >
       <button
-        class="map-control-button"
         [matMenuTriggerFor]="mapMenu"
         title="select the layers displayed in the map"
         i18n-title="@@layer-switcher.title"
diff --git a/client/libs/ol/src/lib/components/map-link-menu.component.ts b/client/libs/ol/src/lib/components/map-link-menu.component.ts
index d99f0a8c4d..c2c8da1720 100644
--- a/client/libs/ol/src/lib/components/map-link-menu.component.ts
+++ b/client/libs/ol/src/lib/components/map-link-menu.component.ts
@@ -30,7 +30,7 @@ import { MAP_SERVICE_TOKEN } from '../services';
       </ng-template>
     </mat-menu>
 
-    <div class="map-control map-links-control" (click)="openPopupMenu()">
+    <div class="ol-control map-links-control" (click)="openPopupMenu()">
       <button
         class="map-control-button"
         [matMenuTriggerFor]="mapMenu"
@@ -46,6 +46,12 @@ import { MAP_SERVICE_TOKEN } from '../services';
       .map-links-control {
         top: 50px;
         right: 10px;
+        z-index: 100;
+      }
+
+      .map-links-control mat-icon {
+        width: 14px;
+        height: 14px;
       }
     `,
   ],
diff --git a/client/libs/ol/src/lib/components/route-control.component.ts b/client/libs/ol/src/lib/components/route-control.component.ts
index 16d8f3a821..6979285c48 100644
--- a/client/libs/ol/src/lib/components/route-control.component.ts
+++ b/client/libs/ol/src/lib/components/route-control.component.ts
@@ -7,9 +7,8 @@ import { ChangeDetectionStrategy } from '@angular/core';
   selector: 'kpn-route-control',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="control">
+    <div class="ol-control geolocation-control">
       <button
-        class="button"
         (click)="action.emit()"
         title="zoom to fit entire route"
         i18n-title="@@route-control.title"
@@ -21,33 +20,10 @@ import { ChangeDetectionStrategy } from '@angular/core';
   `,
   styles: [
     `
-      .control {
-        position: absolute;
+      .geolocation-control {
         left: 8px;
-        top: 112px;
+        top: 110px;
         z-index: 100;
-        height: 31px;
-        width: 31px;
-        padding: 2px;
-        border: 0 none white;
-        border-radius: 3px;
-        background-color: rgba(255, 255, 255, 0.5);
-      }
-
-      .button {
-        margin: 1px;
-        background-color: rgba(0, 60, 136, 0.5);
-        color: white;
-        border: 0 none white;
-        border-radius: 2px;
-        text-align: center;
-        line-height: 28px;
-        height: 28px;
-        width: 28px;
-      }
-
-      .button:hover {
-        background-color: rgba(0, 60, 136, 0.7);
       }
     `,
   ],
diff --git a/client/libs/ol/src/lib/domain/map-geocoder.ts b/client/libs/ol/src/lib/domain/map-geocoder.ts
index 15dcd91d30..5d0f9e3ee0 100644
--- a/client/libs/ol/src/lib/domain/map-geocoder.ts
+++ b/client/libs/ol/src/lib/domain/map-geocoder.ts
@@ -1,12 +1,11 @@
-import Geocoder from '@kirtandesai/ol-geocoder';
+import Geocoder from 'ol-geocoder';
 import Map from 'ol/Map';
 
 export class MapGeocoder {
   static install(map: Map): void {
     const geocoder = new Geocoder('nominatim', {
       provider: 'osm',
-      targetType: 'glass-button',
-      lang: 'en', // Photon does not support "nl" (only: "de", "it", "fr" and "en")
+      lang: 'en',
       placeholder: 'Search for...',
       limit: 5,
       keepOpen: false,
diff --git a/client/libs/planner/src/lib/pages/planner/geolocation/geolocation-control.component.ts b/client/libs/planner/src/lib/pages/planner/geolocation/geolocation-control.component.ts
index cb1930b96a..2c7d0a5d6b 100644
--- a/client/libs/planner/src/lib/pages/planner/geolocation/geolocation-control.component.ts
+++ b/client/libs/planner/src/lib/pages/planner/geolocation/geolocation-control.component.ts
@@ -13,9 +13,8 @@ import { GeolocationUnavailableDialogComponent } from './geolocation-unavailable
   selector: 'kpn-geolocation-control',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="control">
+    <div class="ol-control map-control geolocation-control">
       <button
-        class="button"
         (click)="onClick()"
         title="position the map on your current location"
         i18n-title="@@geolocation-control.title"
@@ -26,38 +25,9 @@ import { GeolocationUnavailableDialogComponent } from './geolocation-unavailable
   `,
   styles: [
     `
-      .control {
-        position: absolute;
+      .geolocation-control {
         left: 8px;
-        top: 146px;
-        z-index: 100;
-        height: 31px;
-        width: 31px;
-        padding: 2px;
-        border: 0 none white;
-        border-radius: 3px;
-        background-color: rgba(255, 255, 255, 0.5);
-      }
-
-      .button {
-        margin: 1px;
-        background-color: rgba(0, 60, 136, 0.5);
-        color: white;
-        border: 0 none white;
-        border-radius: 2px;
-        height: 28px;
-        width: 28px;
-        padding-left: 3px;
-        padding-top: 5px;
-      }
-
-      .control ::ng-deep mat-icon svg {
-        width: 18px;
-        height: 18px;
-      }
-
-      .button:hover {
-        background-color: rgba(0, 60, 136, 0.7);
+        top: 148px;
       }
     `,
   ],
diff --git a/client/package.json b/client/package.json
index d39568b0fb..61e8914e3e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -49,8 +49,8 @@
     "ngx-cookie-service": "^15.0.0",
     "ngx-device-detector": "^5.0.1",
     "ngx-markdown": "15.1.2",
-    "ol": "7.3.0",
-    "@kirtandesai/ol-geocoder": "5.0.6",
+    "ol": "7.5.2",
+    "ol-geocoder": "4.3.0",
     "rxjs": "^7.5.6",
     "tslib": "^2.4.0",
     "zone.js": "0.13.0"
diff --git a/client/project.json b/client/project.json
index 36f5a00215..2662e7dcb5 100644
--- a/client/project.json
+++ b/client/project.json
@@ -62,7 +62,7 @@
           "src/theme.scss",
           "src/styles.scss",
           "node_modules/ol/ol.css",
-          "node_modules/@kirtandesai/ol-geocoder/dist/ol-geocoder.css"
+          "node_modules/ol-geocoder/dist/ol-geocoder.css"
         ],
         "scripts": [
           "node_modules/marked/marked.min.js"
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 0d3bf9e5e3..5f7664db0d 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -610,33 +610,11 @@ input[type=number] {
 .map-control {
   position: absolute;
   z-index: 100;
-  height: 31px;
-  width: 31px;
-  padding: 2px;
-  border: 0 none white;
-  border-radius: 3px;
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-.map-control-button {
-  margin: 1px;
-  background-color: rgba(0, 60, 136, 0.5);
-  color: white;
-  border: 0 none white;
-  border-radius: 2px;
-  height: 28px;
-  width: 28px;
-  padding-left: 3px;
-  padding-top: 5px;
-}
-
-.map-control mat-icon svg {
-  width: 18px;
-  height: 18px;
 }
 
-.map-control-button:hover {
-  background-color: rgba(0, 60, 136, 0.7);
+.map-control mat-icon {
+  width: 14px;
+  height: 14px;
 }
 
 .map-control-menu {
diff --git a/client/yarn.lock b/client/yarn.lock
index c47f210952..af5187bd25 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2619,11 +2619,6 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@kirtandesai/ol-geocoder@5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@kirtandesai/ol-geocoder/-/ol-geocoder-5.0.6.tgz#2894056c49da41323e8084464b4337f9914e7a8c"
-  integrity sha512-BuyGST9PHTEB39NL5YiW3O0PvU3JUyzDDjVc2JriuvyREIoKJJ5szbwdRuvWoMnWRsiEhnTBypHD4/o8Ya2sYA==
-
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@@ -10475,22 +10470,28 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
-ol-mapbox-style@^9.2.0:
-  version "9.7.0"
-  resolved "https://registry.yarnpkg.com/ol-mapbox-style/-/ol-mapbox-style-9.7.0.tgz#38a4f7abc8f0a94f378dcdb7cefdcc69ca3f6287"
-  integrity sha512-YX3u8FBJHsRHaoGxmd724Mp5WPTuV7wLQW6zZhcihMuInsSdCX1EiZfU+8IAL7jG0pbgl5YgC0aWE/MXJcUXxg==
+ol-geocoder@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ol-geocoder/-/ol-geocoder-4.3.0.tgz#d3f61552b49fc247a9c65d8b74c91dc5d7a0413e"
+  integrity sha512-CcuoebLrUiS5ejefd9y4F3eyw8aZhUE9NPHn8fcVuvM8PSh/lwhWrQE4XPRMGnuPDoh9CZEv5volUkqnx5h3Sg==
+
+ol-mapbox-style@^10.1.0:
+  version "10.7.0"
+  resolved "https://registry.yarnpkg.com/ol-mapbox-style/-/ol-mapbox-style-10.7.0.tgz#8837912da2a16fbd22992d76cbc4f491c838b973"
+  integrity sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==
   dependencies:
     "@mapbox/mapbox-gl-style-spec" "^13.23.1"
     mapbox-to-css-font "^2.4.1"
+    ol "^7.3.0"
 
-ol@7.3.0:
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/ol/-/ol-7.3.0.tgz#7ffb5f258dafa4a3e218208aad9054d61f6fe786"
-  integrity sha512-08vJE4xITKPazQ9qJjeqYjRngnM9s+1eSv219Pdlrjj3LpLqjEH386ncq+76Dw1oGPGR8eLVEePk7FEd9XqqMw==
+ol@7.5.2, ol@^7.3.0:
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/ol/-/ol-7.5.2.tgz#2e40a16b45331dbee86ca86876fcc7846be0dbb7"
+  integrity sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==
   dependencies:
     earcut "^2.2.3"
     geotiff "^2.0.7"
-    ol-mapbox-style "^9.2.0"
+    ol-mapbox-style "^10.1.0"
     pbf "3.2.1"
     rbush "^3.0.1"