diff --git a/src/Button/PrintButton/PrintButton.example.md b/src/Button/PrintButton/PrintButton.example.md index 1a0dfa0b6a..c7310595c3 100644 --- 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 index 2774b96900..04a75ac904 100644 --- 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('', () => { @@ -37,7 +38,9 @@ describe('', () => { it('adds queryable icon if prop wmsLayer has queryable set to true', () => { testLayer.set('queryable', true); - render(); + const map = TestUtil.createMap(); + + render(); let icon; expect(() => { icon = screen.getByLabelText(labelIconQueryable); @@ -58,7 +61,8 @@ describe('', () => { const wmsAttribution = 'Test - attribution'; testLayer.getSource()?.setAttributions(wmsAttribution); - render(); + const map = TestUtil.createMap(); + render(); let icon; expect(() => { icon = screen.getByLabelText(labelIconAttribution); diff --git a/src/Container/AddWmsPanel/AddWmsLayerEntry/AddWmsLayerEntry.tsx b/src/Container/AddWmsPanel/AddWmsLayerEntry/AddWmsLayerEntry.tsx index 218ad8ced0..70b2963c42 100644 --- 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 = ({ + 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 = ({ const [queryable, setQueryable] = useState(); 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 index 7e79529904..9aa1158803 100644 --- a/src/Container/AddWmsPanel/AddWmsPanel.tsx +++ b/src/Container/AddWmsPanel/AddWmsPanel.tsx @@ -123,6 +123,7 @@ export const AddWmsPanel: React.FC = ({
) diff --git a/src/LayerSwitcher/LayerSwitcher.example.md b/src/LayerSwitcher/LayerSwitcher.example.md index b80317b1f4..c02febeac2 100644 --- 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 index b9c5a888d7..ed05f0e7ff 100644 --- 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('', () => { source: new OlSourceOsm() }), new OlLayerTile({ - source: new OlSourceStamen({ - layer: 'watercolor' - }) - }), + source: new OlSourceOsm() + }) ]; map = TestUtil.createMap(); map.addLayer(layers[0]);