chore: update to ol 8 api

BREAKING CHANGE: the AddWmsLayerEntry accepts a map prop now (required for attributions)
terrestris · May 6, 2024 · fc1ff8c · fc1ff8c
1 parent ddc8e7d
commit fc1ff8c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 36 deletions.
diff --git a/src/Button/PrintButton/PrintButton.example.md b/src/Button/PrintButton/PrintButton.example.md
@@ -14,7 +14,6 @@ import OlMap from 'ol/Map';
 import {fromLonLat, get as getProjection} from 'ol/proj';
 import {OSM, Vector as VectorSource} from 'ol/source';
 import OlSourceOsm from 'ol/source/OSM';
-import OlSourceStamen from 'ol/source/Stamen';
 import OlSourceTileWMS from 'ol/source/TileWMS';
 import WMTS from 'ol/source/WMTS';
 import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
@@ -133,18 +132,9 @@ const PrintButtonExample = () => {
     osm.set('name', 'OpenStreetMap');
     osm.set('legendUrl', 'https://terrestris.github.io/react-geo/assets/legend1.png');
 
-    const stamen = new OlLayerTile({
-      source: new OlSourceStamen({
-        layer: 'watercolor'
-      })
-    });
-    stamen.set('name', 'Stamen');
-    stamen.set('legendUrl', 'https://terrestris.github.io/react-geo/assets/legend2.png');
-
     const newMap = new OlMap({
       layers: [
         osm,
-        stamen,
         new OlLayerTile({
           name: 'True Color Composite',
           opacity: 0.5,

diff --git a/src/Container/AddWmsPanel/AddWmsLayerEntry/AddWmsLayerEntry.spec.tsx b/src/Container/AddWmsPanel/AddWmsLayerEntry/AddWmsLayerEntry.spec.tsx
@@ -6,6 +6,7 @@ import OlLayerTile from 'ol/layer/Tile';
 import OlSourceTileWMS from 'ol/source/TileWMS';
 import * as React from 'react';
 
+import TestUtil from '../../../Util/TestUtil';
 import AddWmsLayerEntry from './AddWmsLayerEntry';
 
 describe('<AddWmsLayerEntry />', () => {
@@ -37,7 +38,9 @@ describe('<AddWmsLayerEntry />', () => {
   it('adds queryable icon if prop wmsLayer has queryable set to true', () => {
     testLayer.set('queryable', true);
 
-    render(<AddWmsLayerEntry wmsLayer={testLayer} />);
+    const map = TestUtil.createMap();
+
+    render(<AddWmsLayerEntry map={map} wmsLayer={testLayer} />);
     let icon;
     expect(() => {
       icon = screen.getByLabelText(labelIconQueryable);
@@ -58,7 +61,8 @@ describe('<AddWmsLayerEntry />', () => {
     const wmsAttribution = 'Test - attribution';
     testLayer.getSource()?.setAttributions(wmsAttribution);
 
-    render(<AddWmsLayerEntry wmsLayer={testLayer} />);
+    const map = TestUtil.createMap();
+    render(<AddWmsLayerEntry map={map} wmsLayer={testLayer} />);
     let icon;
     expect(() => {
       icon = screen.getByLabelText(labelIconAttribution);

diff --git a/src/Container/AddWmsPanel/AddWmsLayerEntry/AddWmsLayerEntry.tsx b/src/Container/AddWmsPanel/AddWmsLayerEntry/AddWmsLayerEntry.tsx
@@ -4,11 +4,14 @@ import { faCopyright, faInfo } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { WmsLayer } from '@terrestris/react-util/dist/Util/typeUtils';
 import { Checkbox, Tooltip } from 'antd';
-import { FrameState } from 'ol/Map';
-import { Attribution as OlAttribution } from 'ol/source/Source';
+import OlMap from 'ol/Map';
 import React, { useEffect, useState } from 'react';
 
 export type AddWmsLayerEntryProps = {
+  /**
+   * The map.
+   */
+  map?: OlMap;
   /**
    * Object containing layer information
    */
@@ -44,6 +47,7 @@ export type AddWmsLayerEntryProps = {
  *
  */
 export const AddWmsLayerEntry: React.FC<AddWmsLayerEntryProps> = ({
+  map,
   wmsLayer,
   layerQueryableText = 'Layer is queryable',
   ariaLabelCopyright = 'Icon indicating that attribution information for layer is available',
@@ -61,19 +65,30 @@ export const AddWmsLayerEntry: React.FC<AddWmsLayerEntryProps> = ({
   const [queryable, setQueryable] = useState<boolean>();
 
   useEffect(() => {
-    if (wmsLayer) {
-      if (wmsLayer.getSource()?.getAttributions()) {
-        const attributionsFn = wmsLayer.getSource()?.getAttributions() as OlAttribution;
-        const attributions = (attributionsFn({} as FrameState));
-        if (attributions?.length > 0) {
-          if (Array.isArray(attributions)) {
-            setCopyright(attributions.join(', '));
-          } else {
-            setCopyright(attributions);
-          }
-        }
+    if (!map || !wmsLayer) {
+      return;
+    }
+
+    setQueryable(!!wmsLayer.get('queryable'));
+
+    const attributionsFn = wmsLayer.getSource()?.getAttributions();
+
+    if (!attributionsFn) {
+      return;
+    }
+
+    const mapView = map.getView();
+    const attributions = attributionsFn({
+      extent: mapView.calculateExtent(),
+      viewState: mapView.getState()
+    });
+
+    if (attributions?.length > 0) {
+      if (Array.isArray(attributions)) {
+        setCopyright(attributions.join(', '));
+      } else {
+        setCopyright(attributions);
       }
-      setQueryable(!!wmsLayer.get('queryable'));
     }
   }, [wmsLayer]);
 

diff --git a/src/Container/AddWmsPanel/AddWmsPanel.tsx b/src/Container/AddWmsPanel/AddWmsPanel.tsx
@@ -123,6 +123,7 @@ export const AddWmsPanel: React.FC<AddWmsPanelProps> = ({
               <div role="listitem" key={idx}>
                 <AddWmsLayerEntry
                   wmsLayer={layer}
+                  map={map}
                 />
               </div>
             )

diff --git a/src/LayerSwitcher/LayerSwitcher.example.md b/src/LayerSwitcher/LayerSwitcher.example.md
@@ -7,7 +7,7 @@ import LayerSwitcher from '@terrestris/react-geo/dist/LayerSwitcher/LayerSwitche
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import OlSourceOsm from 'ol/source/OSM';
-import OlSourceStamen from 'ol/source/Stamen';
+import OlSourceTileWMS from 'ol/source/TileWMS';
 import OlView from 'ol/View';
 import * as React from 'react';
 
@@ -25,11 +25,10 @@ class LayerSwitcherExample extends React.Component {
         source: new OlSourceOsm()
       }),
       new OlLayerTile({
-        name: 'Stamen',
-        source: new OlSourceStamen({
-          layer: 'watercolor'
+        source: new OlSourceTileWMS({
+          url: 'https://ows.terrestris.de/osm/service?'
         })
-      }),
+      })
     ];
 
     this.map = new OlMap({

diff --git a/src/LayerSwitcher/LayerSwitcher.spec.tsx b/src/LayerSwitcher/LayerSwitcher.spec.tsx
@@ -2,7 +2,6 @@ import { render, screen,within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import OlLayerTile from 'ol/layer/Tile';
 import OlSourceOsm from 'ol/source/OSM';
-import OlSourceStamen from 'ol/source/Stamen';
 import React from 'react';
 
 import TestUtil from '../Util/TestUtil';
@@ -18,10 +17,8 @@ describe('<LayerSwitcher />', () => {
         source: new OlSourceOsm()
       }),
       new OlLayerTile({
-        source: new OlSourceStamen({
-          layer: 'watercolor'
-        })
-      }),
+        source: new OlSourceOsm()
+      })
     ];
     map = TestUtil.createMap();
     map.addLayer(layers[0]);