OpenLayers 9.0 and Google support

.github/workflows/test-postgis.yml

@@ -27,6 +27,10 @@ jobs:
         redmine_version: ${{ fromJSON(vars.PLUGIN_TEST_MATRIX_REDMINE_VERSION) }}
         ruby_version: ${{ fromJSON(vars.PLUGIN_TEST_MATRIX_RUBY_VERSION) }}
         db_version: [12-3.0, 15-3.3]
+        exclude:
+          - redmine_version: 5.0-stable
+            ruby_version: '3.2'
+          - redmine_version: master
 
     services:
       postgres:
@@ -62,7 +66,7 @@ jobs:
 
       - name: Install Node/Yarn packages
         run: |
-          curl -sL https://deb.nodesource.com/setup_16.x | bash -
+          curl -sL https://deb.nodesource.com/setup_20.x | bash -
           curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
           echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
           apt-get update --yes --quiet

app/views/gtt_map_layers/_form.html.erb

@@ -11,7 +11,7 @@
   <p>
     <%= f.select :layer,
       options_for_select(
-        ['Image','Tile','MapboxVector','Vector','VectorTile'],
+        ['Image','Tile','MapboxVector','Vector','VectorTile','WebGLTile'],
         selected: f.object.layer ),
       { include_blank: t('map_layer.layer_options_select'), required: true }
     %>
@@ -22,7 +22,7 @@
   <p>
     <%= f.select :source,
       options_for_select(
-        ['BingMaps','CartoDB','ImageStatic','ImageWMS','OSM','Raster','Stamen',
+        ['BingMaps','CartoDB','Google','ImageStatic','ImageWMS','OSM','Raster','Stamen',
          'TileJSON','TileWMS','UTFGrid','Vector','VectorTile','WMTS','XYZ'],
         selected: f.object.source ),
       { include_blank: t('map_layer.source_options_select') }
@@ -55,6 +55,7 @@
       'MapboxVector': [],
       'Vector': ['Vector'],
       'VectorTile': ['VectorTile'],
+      'WebGLTile': ['Google'],
     };
 
     const map_format_config = {
@@ -211,5 +212,19 @@
     },
     'format': 'ol.format.MVT',
     'format_options': {}
+  },{
+    'name': 'Google Maps',
+    'layer': 'WebGLTile',
+    'layer_options': {},
+    'source': 'Google',
+    'source_options': {
+      'key': 'YOUR_API_KEY',
+      'mapType': 'roadmap',
+      'language': 'ja_JP',
+      'scale': 'scaleFactor2x',
+      'layerTypes': ['layerTraffic'],
+    },
+    'format': '',
+    'format_options': {}
   }];
 </script>

package.json

@@ -24,9 +24,9 @@
     "@mdi/font": "^7.4.47",
     "fontfaceobserver": "^2.3.0",
     "geojson": "^0.5.0",
-    "ol": "^8.2.0",
+    "ol": "^9.0.0",
     "ol-ext": "^4.0.14",
-    "ol-mapbox-style": "^12.2.0"
+    "ol-mapbox-style": "^12.2.1"
   },
   "devDependencies": {
     "@types/fontfaceobserver": "^2.1.3",
@@ -35,12 +35,12 @@
     "@types/jqueryui": "^1.12.21",
     "@types/ol-ext": "npm:@siedlerchr/types-ol-ext",
     "css-loader": "^6.10.0",
-    "sass": "^1.70.0",
-    "sass-loader": "^14.1.0",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
     "style-loader": "^3.3.4",
     "ts-loader": "^9.5.1",
     "typescript": "^5.2.3",
-    "webpack": "^5.90.1",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4"
   }
 }

src/components/gtt-client/init/layers.ts

@@ -194,7 +194,7 @@ function addVectorLayer(this: any, features: Feature<Geometry>[] | null): void {
 
   this.vector.set('title', 'Features');
   this.vector.set('displayInLayerSwitcher', false);
-  this.vector.on('prerender', () => this.map.flushDeclutterItems());
+  // this.vector.on('prerender', () => this.map.flushDeclutterItems());
 
   // Listen to the moveend event and show message when zoom level is too low
   let previousZoom = this.map.getView().getZoom();
@@ -243,13 +243,19 @@ function renderProjectBoundary(this: any): void {
     }
     this.layerArray.forEach((layer: Layer) => {
       if (layer.get('baseLayer')) {
-        layer.addFilter(new Mask({
-          feature: boundary,
-          inner: false,
-          fill: new Fill({
-            color: [220, 26, 26, 0.1]
-          })
-        }));
+        console.log(layer.getRenderSource())
+        if (layer.getRenderSource() instanceof olSource.Google) {
+          // currently Google source does not seem to support filters
+        }
+        else {
+          layer.addFilter(new Mask({
+            feature: boundary,
+            inner: false,
+            fill: new Fill({
+              color: [220, 26, 26, 0.1]
+            })
+          }));
+        }
       }
     });
   }

yarn.lock

@@ -966,18 +966,18 @@ ol-ext@^4.0.14:
   resolved "https://registry.yarnpkg.com/ol-ext/-/ol-ext-4.0.14.tgz#12389a2131356be2daa4324f83480f67c8b76df1"
   integrity sha512-ooTz4D2eXrZ5EdAQZvG0zXh4Jc0cEQDQVTcVu0MdoOpswq550NQbLuA8jRILWesWbpNh/7AnntnLPqmoizI2uA==
 
-ol-mapbox-style@^12.2.0:
-  version "12.2.0"
-  resolved "https://registry.yarnpkg.com/ol-mapbox-style/-/ol-mapbox-style-12.2.0.tgz#081eb25270b8e8ed3b697a69b3f7c55f9838b7b6"
-  integrity sha512-krod1qyX6IedQ0Hb3Q3FYQE+Dq2cH6qqBrBrYDwwWNx934gw2mCxlvBg7h32Xd++GECwnPn47MOIPqV+M+DwGg==
+ol-mapbox-style@^12.2.1:
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/ol-mapbox-style/-/ol-mapbox-style-12.2.1.tgz#12b568f199a8448fd146191b817b93e075eac2f9"
+  integrity sha512-soh8x+8CwlA+e3fd8grotA4XXnm0DSWnpzu5Ef3aEQwpM1o2OfoGPSk/hpjhXL5kFUm79pEyiONTw+kdth2FEQ==
   dependencies:
     "@mapbox/mapbox-gl-style-spec" "^13.23.1"
     mapbox-to-css-font "^2.4.1"
 
-ol@^8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/ol/-/ol-8.2.0.tgz#145153eab0ea3b5d04f51f46d6c69c224cccd5c3"
-  integrity sha512-/m1ddd7Jsp4Kbg+l7+ozR5aKHAZNQOBAoNZ5pM9Jvh4Etkf0WGkXr9qXd7PnhmwiC1Hnc2Toz9XjCzBBvexfXw==
+ol@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/ol/-/ol-9.0.0.tgz#449207b0da5c31f905a030fac141e04935a126a0"
+  integrity sha512-+nYHZYbHrRUTDJ8ryxXPdDoAiaT6Zea02cocmGqsJXs4Oac1fYC9EbTIU2Y7803QcmG3u2MR88RxbksBvK+ZfQ==
   dependencies:
     color-rgba "^3.0.0"
     color-space "^2.0.1"
@@ -1213,17 +1213,17 @@ safe-buffer@^5.1.0:
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-sass-loader@^14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-14.1.0.tgz#43ba90e0cd8a15a1e932e818c525b0115a0ce8a3"
-  integrity sha512-LS2mLeFWA+orYxHNu+O18Xe4jR0kyamNOOUsE3NyBP4DvIL+8stHpNX0arYTItdPe80kluIiJ7Wfe/9iHSRO0Q==
+sass-loader@^14.1.1:
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-14.1.1.tgz#2c9d2277c5b1c5fe789cd0570c046d8ad23cb7ca"
+  integrity sha512-QX8AasDg75monlybel38BZ49JP5Z+uSKfKwF2rO7S74BywaRmGQMUBw9dtkS+ekyM/QnP+NOrRYq8ABMZ9G8jw==
   dependencies:
     neo-async "^2.6.2"
 
-sass@^1.70.0:
-  version "1.70.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.70.0.tgz#761197419d97b5358cb25f9dd38c176a8a270a75"
-  integrity sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==
+sass@^1.71.1:
+  version "1.71.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.71.1.tgz#dfb09c63ce63f89353777bbd4a88c0a38386ee54"
+  integrity sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -1490,10 +1490,10 @@ webpack-sources@^3.2.3:
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.90.1:
-  version "5.90.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.90.1.tgz#62ab0c097d7cbe83d32523dbfbb645cdb7c3c01c"
-  integrity sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==
+webpack@^5.90.3:
+  version "5.90.3"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.90.3.tgz#37b8f74d3ded061ba789bb22b31e82eed75bd9ac"
+  integrity sha512-h6uDYlWCctQRuXBs1oYpVe6sFcWedl0dpcVaTf/YF67J9bKvwJajFulMVSYKHrksMB3I/pIagRzDxwxkebuzKA==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^1.0.5"