Merge pull request #1080 from terrestris/olandreactgeoupdate

Breaking: Updating ol to v7, react-geo to v22

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 4.0.0 - 2022-12-14
+
+Breaking:
+  - Updating OpenLayers to v7 and react-geo to v22 ([#1080](/~https://github.com/terrestris/react-geo-baseclient/pull/1080))
+
 ## 3.0.0 - 2022-12-13
 
 - Enable download of multiple `FeatureInfoGrids`

config/webpack.common.config.js

@@ -185,8 +185,7 @@ const commonWebpackConfig = {
       'react-redux': path.join(__dirname + '/../', 'node_modules', 'react-redux'),
       'react-i18next': path.join(__dirname + '/../', 'node_modules', 'react-i18next'),
       '@ant-design/icons': path.join(__dirname + '/../', 'node_modules', '@ant-design/icons'),
-      'moment': path.join(__dirname + '/../', 'node_modules', 'moment'),
-      'ol': path.join(__dirname + '/../', 'node_modules', 'ol')
+      'moment': path.join(__dirname + '/../', 'node_modules', 'moment')
     }
   }
 };

package.json

@@ -59,9 +59,9 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^1.9.0",
     "@terrestris/base-util": "1.0.1",
-    "@terrestris/mapfish-print-manager": "^6.5.1",
-    "@terrestris/ol-util": "^7.4.1",
-    "@terrestris/react-geo": "^19.8.2",
+    "@terrestris/mapfish-print-manager": "^7.0.2",
+    "@terrestris/ol-util": "^10.1.2",
+    "@terrestris/react-geo": "^22.0.0",
     "@terrestris/vectortiles": "0.4.0",
     "antd": "4.18.9",
     "copy-to-clipboard": "3.3.2",
@@ -74,7 +74,7 @@
     "node-fetch": "^2.6.7",
     "normalize.css": "^8.0.1",
     "object-fit-polyfill": "0.1.0",
-    "ol": "6.14.0",
+    "ol": "7.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",

src/component/AddLayerPanel/AddLayerPanel.tsx

@@ -64,7 +64,7 @@ class AddLayerPanel extends React.Component<AddLayerPanelProps, AddLayerPanelSta
    */
   getCapabilities = (url: string) => {
     this.setState({fetching: true});
-    CapabilitiesUtil.parseWmsCapabilities(url)
+    CapabilitiesUtil.getWmsCapabilities(url)
       .then((capabilities: any) => CapabilitiesUtil.getLayersFromWmsCapabilities(capabilities, 'Title'))
       .then((layers: WmsLayer[]) => {this.setState({layers});})
       .finally(() => {this.setState({fetching: false});});

src/component/Multisearch/Multisearch.tsx

@@ -397,7 +397,7 @@ export default class Multisearch extends
             featureTypes={Object.keys(searchConfig)}
             onFetchSuccess={this.wfsSearchSuccess.bind(this)}
             onFetchError={this.onFetchError.bind(this)}
-            searchAttributes={searchAttributes}
+            attributeDetails={searchAttributes}
             visible={false}
             searchTerm={searchTerm}
             additionalFetchOptions={{

src/component/Popup/FeatureInfo/FeatureInfo.tsx

@@ -224,11 +224,12 @@ export const FeatureInfo: React.FC<ComponentProps> = ({
       positioning,
       stopEvent,
       insertFirst,
-      autoPan,
-      autoPanAnimation: {
-        duration: autoPanAnimationDuration
+      autoPan: {
+        animation: {
+          duration: autoPanAnimationDuration
+        },
+        margin: autoPanMargin
       },
-      autoPanMargin
     });
 
     // If the pointer is over the popup, no pointermove should be fired.

src/component/PrintPanel/PrintPanelV2.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import {
   Row,

src/component/PrintPanel/PrintPanelV3.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import {
   Row,

src/component/SiderMenu/SiderMenu.tsx

@@ -10,7 +10,7 @@ import ToggleGroup from '@terrestris/react-geo/dist/Button/ToggleGroup/ToggleGro
 import LayerTree from '@terrestris/react-geo/dist/LayerTree/LayerTree';
 
 import LegendContainer from '../container/Legend/LegendContainer';
-import MapUtil from '@terrestris/ol-util/src/MapUtil/MapUtil';
+import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 const { Sider } = Layout;
 const SubMenu = Menu.SubMenu;
 

src/component/button/HsiButton/HsiButton.tsx

@@ -6,9 +6,6 @@ import ToggleButton, { ToggleButtonProps } from '@terrestris/react-geo/dist/Butt
 import OlMap from 'ol/Map';
 import OlView from 'ol/View';
 import OlProjection from 'ol/proj/Projection';
-import OlSourceImageWMS from 'ol/source/ImageWMS';
-import OlSourceTileWMS from 'ol/source/TileWMS';
-import OlSourceVector from 'ol/source/Vector';
 import OlFeature from 'ol/Feature';
 import OlMapBrowserEvent from 'ol/MapBrowserEvent';
 import OlGeometry from 'ol/geom/Geometry';
@@ -22,6 +19,8 @@ import {
   fetchFeatures
 } from '../../../state/remoteFeatures/actions';
 
+import { WmsLayer } from '@terrestris/react-geo/dist/Util/typeUtils';
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfo } from '@fortawesome/free-solid-svg-icons';
 
@@ -142,11 +141,17 @@ export const HsiButton: React.FC<ComponentProps> = ({
     // dispatch that any running HOVER process should be canceled
     dispatch(abortFetchingFeatures('HOVER'));
 
-    map.forEachLayerAtPixel(pixel, (layer: LayerType) => {
-      const layerSource = layer.getSource();
+    const mapLayers =
+      map.getAllLayers()
+        .filter(layerFilter);
+    mapLayers.forEach(layer => {
+      const layerSource = (layer as WmsLayer).getSource();
+      if (!layerSource) {
+        return;
+      }
       const coordinate: number[] = map.getCoordinateFromPixel(pixel);
 
-      if (layer.getSource() instanceof OlSourceVector) {
+      if (layer.getSource().constructor.name === 'VectorSource') {
         internalVectorFeatures[layer.get('name')] = [];
         const internalFeatures = olEvt.map.getFeaturesAtPixel(pixel, {
           layerFilter: (layerCandidate: LayerType) => {
@@ -224,8 +229,8 @@ export const HsiButton: React.FC<ComponentProps> = ({
   const layerFilter = (layerCandidate: LayerType) => {
     const source = layerCandidate.getSource();
     const isHoverable: boolean = layerCandidate.get('hoverable');
-    const isSupportedHoverSource: boolean = source instanceof OlSourceImageWMS ||
-      source instanceof OlSourceTileWMS || source instanceof OlSourceVector;
+    const isSupportedHoverSource: boolean = source.constructor.name === 'ImageWMS' ||
+      source.constructor.name === 'TileWMS' || source.constructor.name === 'VectorSource';
     return isHoverable && isSupportedHoverSource;
   };
 

src/component/container/LayerLegendAccordion/LayerLegendAccordion.tsx

@@ -7,6 +7,7 @@ import OlLayer from 'ol/layer/Layer';
 import OlImageLayer from 'ol/layer/Image';
 import OlMap from 'ol/Map';
 import ImageWMS from 'ol/source/ImageWMS';
+import TileWMS from 'ol/source/TileWMS';
 import { getUid } from 'ol/util';
 
 import isEqual from 'lodash/isEqual';
@@ -215,7 +216,10 @@ export class LayerLegendAccordion extends React.Component<LayerLegendAccordionPr
     const scale = MapUtil.getScaleForResolution(map.getView().getResolution(), unit);
 
     // clone the array, reverse will work in place
-    const reversed = mapLayers.slice(0).reverse().filter((l) => l && l.getVisible());
+    const reversed = mapLayers.slice(0).reverse().filter(
+      (l) => l && l.getVisible() && (
+        l.getSource() instanceof TileWMS) ||
+        l.getSource() instanceof ImageWMS);
     if (baseLayer) {
       reversed.push(baseLayer);
     }

src/component/container/LayerTreeClassic/LayerTreeClassic.tsx

@@ -24,6 +24,7 @@ import _isEmpty from 'lodash/isEmpty';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import ImageWMS from 'ol/source/ImageWMS';
+import TileWMS from 'ol/source/TileWMS';
 import { isWmsLayer } from '@terrestris/react-geo/dist/Util/typeUtils';
 
 interface DefaultLayerTreeClassicProps {
@@ -131,7 +132,9 @@ export const LayerTreeClassic: React.FC<ComponentProps> = ({
               }
             </div>
           </div>
-          {(layer.get('visible') && isInResolutionRange) &&
+          {(layer.get('visible') && isInResolutionRange) && (
+            layer.getSource() instanceof TileWMS ||
+            layer.getSource() instanceof ImageWMS) &&
             <>
               <div className='layer-transparency'>
                 {t('LayerTreeClassic.transparency')}

src/component/container/LayerTreeDropdownContextMenu/LayerTreeDropdownContextMenu.tsx

@@ -3,13 +3,13 @@ import React, { useState } from 'react';
 import { MenuInfo } from 'rc-menu/lib/interface';
 
 import OlLayerBase from 'ol/layer/Base';
-import OlLayerLayer from 'ol/layer/Layer';
+import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import { transformExtent } from 'ol/proj';
 import {Extent as OlExtent} from 'ol/extent';
-import TileWMS from 'ol/source/TileWMS';
-import ImageWMS from 'ol/source/ImageWMS';
-import LayerRenderer from 'ol/renderer/Layer';
+import OlSourceImageWMS from 'ol/source/ImageWMS';
+import OlLayerImage from 'ol/layer/Image';
+import OlSourceTileWMS from 'ol/source/TileWMS';
 
 import {
   Menu,
@@ -121,8 +121,8 @@ export const LayerTreeDropdownContextMenu: React.FC<ComponentProps> = ({
     setExtentLoading(true);
 
     try {
-      let extent: OlExtent = await LayerUtil.getExtentForLayer(layer as OlLayerLayer<TileWMS | ImageWMS,
-        LayerRenderer<any>>);
+      let extent: OlExtent = await LayerUtil.getExtentForLayer(
+        layer as OlLayerTile<OlSourceTileWMS> | OlLayerImage<OlSourceImageWMS>);
       extent = transformExtent(extent, 'EPSG:4326', map.getView().getProjection());
       map.getView().fit(extent);
     } catch (error) {

src/component/container/Legend/LegendContainer.tsx

@@ -4,6 +4,7 @@ import OlLayerGroup from 'ol/layer/Group';
 import OlLayerBase from 'ol/layer/Base';
 import OlImageLayer from 'ol/layer/Image';
 import ImageWMS from 'ol/source/ImageWMS';
+import TileWMS from 'ol/source/TileWMS';
 import { getUid } from 'ol/util';
 
 import { MapUtil } from '@terrestris/ol-util/dist/MapUtil/MapUtil';
@@ -69,7 +70,9 @@ export default class LegendContainer extends React.Component<LegendContainerProp
     let layers: OlImageLayer<ImageWMS>[] = MapUtil.getAllLayers(layerGroup) as OlImageLayer<ImageWMS>[];
 
     layers = layers
-      .filter((layer: OlImageLayer<ImageWMS>) => !(layer instanceof OlLayerGroup))
+      .filter((layer: OlImageLayer<ImageWMS>) =>
+        (layer.getSource && layer.getSource() instanceof TileWMS) ||
+        layer.getSource && layer.getSource() instanceof ImageWMS)
       .filter(filterFn);
 
     // clone the array, reverse will work in place

src/index.tsx

@@ -16,7 +16,7 @@ import { get as OlGetProjection } from 'ol/proj';
 import OlView from 'ol/View';
 import OlScaleLine from 'ol/control/ScaleLine';
 
-import ProjectionUtil from '@terrestris/ol-util/src/ProjectionUtil/ProjectionUtil';
+import ProjectionUtil from '@terrestris/ol-util/dist/ProjectionUtil/ProjectionUtil';
 
 import MapProvider from '@terrestris/react-geo/dist/Provider/MapProvider/MapProvider';
 import { mappify } from '@terrestris/react-geo/dist/HigherOrderComponent/MappifiedComponent/MappifiedComponent';
@@ -42,7 +42,7 @@ const MappifiedMain = mappify(Main);
  */
 const setupMap = (state: BaseClientState) => {
   ProjectionUtil.initProj4Definitions();
-  ProjectionUtil.initProj4DefinitionMappings();
+  ProjectionUtil.initProj4DefinitionMappings([]);
   const mapViewConfig = state.mapView;
   const mapLayers = state.mapLayers;
   const {

src/state/mapView/index.ts

@@ -5,7 +5,7 @@ import {
 
 import { Coordinate } from 'ol/coordinate';
 
-import { MapUtil } from '@terrestris/ol-util/src/MapUtil/MapUtil';
+import { MapUtil } from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 
 export interface MapView {
   center: Coordinate;

src/util/AppContextUtil/BaseAppContextUtil.ts

@@ -4,6 +4,7 @@ import { ProjectionLike } from 'ol/proj';
 import { MapUtil } from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 
 import { BaseClientState } from '../../state/reducer';
+import { Units } from 'ol/proj/Units';
 
 export interface AppContextUtil {
   canReadCurrentAppContext: () => boolean;
@@ -32,7 +33,7 @@ class BaseAppContextUtil {
    * @param {string} projUnit Projection unit. Default to 'm'
    * @return {Array} Array of computed map scales.
    */
-  getMapScales(resolutions: number[], projUnit: string = 'm'): number[] {
+  getMapScales(resolutions: number[], projUnit: Units = 'm'): number[] {
     if (!resolutions) {
       return;
     }