Merge pull request #476 from terrestris/add-vector-tile-support

feat: add support vor mapbox vector tiles

.github/workflows/on-pull-request.yml

@@ -29,7 +29,7 @@ jobs:
           ${{ runner.OS }}-
 
     - name: Install dependencies ⏬
-      run: npm ci
+      run: npm ci --force
 
     - name: Lint code 💄
       run: npm run lint

.github/workflows/on-push-main.yml

@@ -32,7 +32,7 @@ jobs:
           ${{ runner.OS }}-
 
     - name: Install dependencies ⏬
-      run: npm ci
+      run: npm ci --force
 
     - name: Lint code 💄
       run: npm run lint

package.json

@@ -33,9 +33,9 @@
   },
   "homepage": "https://github.com/terrestris/react-util#readme",
   "peerDependencies": {
+    "ol": ">=7",
     "react": ">=17",
-    "react-dom": ">=17",
-    "ol": ">=7"
+    "react-dom": ">=17"
   },
   "dependencies": {
     "@terrestris/base-util": "^1.0.1",
@@ -48,7 +48,6 @@
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/preset-env": "^7.14.1",
     "@babel/preset-react": "^7.13.13",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
     "@babel/preset-typescript": "^7.13.0",
     "@cfaester/enzyme-adapter-react-18": "^0.7.1",
     "@terrestris/eslint-config-typescript": "^3.0.0",
@@ -66,6 +65,7 @@
     "core-js": "^3.12.0",
     "enzyme": "^3.11.0",
     "eslint": "^8.14.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "jest": "^29.6.4",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.6.4",
@@ -75,6 +75,7 @@
     "moment": "^2.29.4",
     "np": "^7.5.0",
     "ol": "^7.5.2",
+    "ol-mapbox-style": "^11.0.3",
     "prop-types": "^15.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.1.0",

src/BackgroundLayerChooser/BackgroundLayerChooser.tsx

@@ -1,11 +1,13 @@
 import OlOverviewMap from 'ol/control/OverviewMap';
 import OlLayerBase from 'ol/layer/Base';
+import LayerGroup from 'ol/layer/Group';
 import OlLayerImage from 'ol/layer/Image';
 import OlLayer from 'ol/layer/Layer';
 import OlLayerTile from 'ol/layer/Tile';
 import { ObjectEvent } from 'ol/Object';
 import { getUid } from 'ol/util';
 import OlView from 'ol/View';
+import { apply as applyMapboxStyle } from 'ol-mapbox-style';
 import React, {
   useEffect,
   useRef,
@@ -88,6 +90,15 @@ export const BackgroundLayerChooser: React.FC<BackgroundLayerChooserProps> = ({
         ovLayer = new OlLayerImage({
           source: selectedLayer.getSource()
         });
+      } else if (selectedLayer instanceof LayerGroup) {
+        if (selectedLayer.get('isVectorTile')) {
+          ovLayer = new LayerGroup();
+          applyMapboxStyle(ovLayer, selectedLayer.get('url'));
+        } else {
+          ovLayer = new LayerGroup({
+            layers: selectedLayer.getLayers()
+          });
+        }
       }
       if (ovLayer && mapTarget.current) {
         const overViewControl = new OlOverviewMap({

src/BackgroundLayerPreview/BackgroundLayerPreview.tsx

@@ -1,11 +1,15 @@
+import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 import { Coordinate } from 'ol/coordinate';
 import OlLayerBase from 'ol/layer/Base';
+import LayerGroup from 'ol/layer/Group';
 import OlLayerImage from 'ol/layer/Image';
 import OlLayer from 'ol/layer/Layer';
 import OlLayerTile from 'ol/layer/Tile';
+import OlLayerVector from 'ol/layer/Vector';
 import OlMap from 'ol/Map';
 import { getUid } from 'ol/util';
 import OlView from 'ol/View';
+import { apply as applyMapboxStyle } from 'ol-mapbox-style';
 import React, { useEffect,useState } from 'react';
 
 import useMap from '../hooks/useMap';
@@ -51,10 +55,23 @@ export const BackgroundLayerPreview: React.FC<BackgroundLayerPreviewProps> = ({
       previewLayer = new OlLayerTile({
         source: layer.getSource()
       });
-    } else if (layer instanceof OlLayerImage){
+    } else if (layer instanceof OlLayerImage) {
       previewLayer = new OlLayerImage({
         source: layer.getSource()
       });
+    } else if (layer instanceof OlLayerVector) {
+      previewLayer = new OlLayerVector({
+        source: layer.getSource()
+      });
+    } else if (layer instanceof LayerGroup) {
+      if (layer.get('isVectorTile')) {
+        previewLayer = new LayerGroup();
+        applyMapboxStyle(previewLayer, layer.get('url'));
+      } else {
+        previewLayer = new LayerGroup({
+          layers: layer.getLayers()
+        });
+      }
     }
 
     setPreviewMap(new OlMap({
@@ -98,8 +115,8 @@ export const BackgroundLayerPreview: React.FC<BackgroundLayerPreviewProps> = ({
   }, [zoom, center]);
 
   const getBgLayersFromMap = (): OlLayer[] => {
-    return mainMap?.getLayerGroup().getLayers()
-      .getArray().filter(backgroundLayerFilter) as OlLayer[] || [];
+    return MapUtil.getAllLayers(mainMap)
+      .filter(backgroundLayerFilter) as OlLayer[] || [];
   };
 
   const updateBgLayerVisibility = (evt: React.MouseEvent<HTMLDivElement>) => {
@@ -110,7 +127,7 @@ export const BackgroundLayerPreview: React.FC<BackgroundLayerPreviewProps> = ({
       return;
     }
 
-    const newBgLayer = mainMap?.getLayerGroup().getLayers().getArray()
+    const newBgLayer = MapUtil.getAllLayers(mainMap)
       .find(l => getUid(l) === layerId);
 
     if (!newBgLayer) {
@@ -123,7 +140,6 @@ export const BackgroundLayerPreview: React.FC<BackgroundLayerPreviewProps> = ({
     if (evt.type === 'click') {
       onClick(newBgLayer as OlLayer);
     }
-
   };
 
   const restoreBgLayerVisibility = () => {
@@ -134,7 +150,6 @@ export const BackgroundLayerPreview: React.FC<BackgroundLayerPreviewProps> = ({
   const uid = getUid(layer);
   const activeUid = getUid(activeLayer);
   const isActive = uid === activeUid;
-
   if (!previewMap) {
     return <></>;
   }