#326 upgrade OpenLayers and ol-geocoder

vmarc · Sep 16, 2023 · 6fb15b7 · 6fb15b7
1 parent 84b0a6c
commit 6fb15b7
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2619,11 +2619,6 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@kirtandesai/[email protected]":
-  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==
+[email protected]:
+  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"
 
-[email protected]:
-  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"