From 790e91ba33c43051943a36ccd7e94544fce66162 Mon Sep 17 00:00:00 2001 From: Simon Seyock Date: Wed, 19 Jun 2024 10:26:46 +0200 Subject: [PATCH 1/2] fix(CoordinateInfo): update docs and react-util --- src/CoordinateInfo/CoordinateInfo.example.md | 199 ++++++++++++++++++- 1 file changed, 198 insertions(+), 1 deletion(-) diff --git a/src/CoordinateInfo/CoordinateInfo.example.md b/src/CoordinateInfo/CoordinateInfo.example.md index 7439e1660..0f584a8c1 100644 --- a/src/CoordinateInfo/CoordinateInfo.example.md +++ b/src/CoordinateInfo/CoordinateInfo.example.md @@ -1,3 +1,6 @@ +The `CoordinateInfo` component is only a very shallow wrapper around the `useCoordinateInfo` hook of react-util. +Often it might be easier to use the hook directly, see the second example on how it's done. + ```jsx import { faCopy } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -94,7 +97,6 @@ const CoordinateInfoExample = () => { }} /> { const features = opts.features; @@ -189,3 +191,198 @@ const CoordinateInfoExample = () => { ; ``` + +Here is the same example, but using `useCoordinateInfo` directly: + +```jsx +import {faCopy} from '@fortawesome/free-solid-svg-icons'; +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import CoordinateInfo from '@terrestris/react-geo/dist/CoordinateInfo/CoordinateInfo'; +import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent'; +import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'; +import { + Button, + Spin, + Statistic, + Tooltip +} from 'antd'; +import * as copy from 'copy-to-clipboard'; +import GeoJSON from 'ol/format/GeoJSON.js'; +import {Vector as VectorLayer} from 'ol/layer.js'; +import OlLayerTile from 'ol/layer/Tile'; +import {bbox as bboxStrategy} from 'ol/loadingstrategy.js'; +import OlMap from 'ol/Map'; +import {fromLonLat} from 'ol/proj'; +import OlSourceOSM from 'ol/source/OSM'; +import OlSourceTileWMS from 'ol/source/TileWMS'; +import VectorSource from 'ol/source/Vector.js'; +import OlView from 'ol/View'; +import React, {useEffect, useMemo, useState} from 'react'; +import useCoordinateInfo from "@terrestris/react-util/dist/Hooks/useCoordinateInfo/useCoordinateInfo"; + +const wmsLayer = new OlLayerTile({ + name: 'States (USA)', + source: new OlSourceTileWMS({ + url: 'https://ahocevar.com/geoserver/wms', + params: { + LAYERS: 'usa:states', + TILED: true + }, + serverType: 'geoserver', + crossOrigin: 'anonymous' + }) +}); + +const vectorSource = new VectorSource({ + format: new GeoJSON(), + url: function (extent) { + return ( + 'https://ows-demo.terrestris.de/geoserver/osm/wfs?service=WFS&' + + 'version=1.1.0&request=GetFeature&typename=osm:osm-country-borders&' + + 'outputFormat=application/json&srsname=EPSG:3857&' + + 'bbox=' + + extent.join(',') + + ',EPSG:3857' + ); + }, + strategy: bboxStrategy, +}); + +const vectorLayer = new VectorLayer({ + source: vectorSource, + style: { + 'stroke-width': 0.75, + 'stroke-color': 'white', + 'fill-color': 'rgba(100,100,100,0.25)', + }, +}); + +const queryLayers = [wmsLayer, vectorLayer]; + +const getValue = (feature, key) => { + if (feature.getProperties().hasOwnProperty(key)) { + return feature.get(key); + } + return null; +}; + +const CoordinateInfoExample = () => { + + const [map, setMap] = useState(); + + const { + features, + loading, + clickCoordinate + } = useCoordinateInfo({ + queryLayers + }); + + useEffect(() => { + setMap(new OlMap({ + layers: [ + new OlLayerTile({ + name: 'OSM', + source: new OlSourceOSM() + }), + vectorLayer, + wmsLayer + ], + view: new OlView({ + center: fromLonLat([-99.4031637, 38.3025695]), + zoom: 4 + }) + })); + }, []); + + if (!map) { + return null; + } + + return ( + + + { + features.length > 0 ? +
+
+ + + + +
+
+ + + + +
+
: + + Click on a state to get details about the clicked coordinate. + + } +
+ ); +}; + +; +``` From 44a36f16d81ff4e451b5007548f350290cbfb59b Mon Sep 17 00:00:00 2001 From: Simon Seyock Date: Wed, 19 Jun 2024 10:56:51 +0200 Subject: [PATCH 2/2] docs(CoordinateInfo): show how to use hook in `CoordinateInfo` example --- package-lock.json | 8 +- package.json | 2 +- src/CoordinateInfo/CoordinateInfo.example.md | 385 ++++++------------- 3 files changed, 112 insertions(+), 283 deletions(-) diff --git a/package-lock.json b/package-lock.json index ee9b6dbba..b0fe9e739 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@fortawesome/react-fontawesome": "^0.2.2", "@terrestris/base-util": "^2.0.0", "@terrestris/ol-util": ">=18", - "@terrestris/react-util": "^8.0.4", + "@terrestris/react-util": "^8.0.5", "@types/lodash": "^4.17.4", "ag-grid-community": "^31.3.2", "ag-grid-react": "^31.3.2", @@ -5689,9 +5689,9 @@ } }, "node_modules/@terrestris/react-util": { - "version": "8.0.4", - "resolved": "https://registry.npmjs.org/@terrestris/react-util/-/react-util-8.0.4.tgz", - "integrity": "sha512-UH7lw+tCem5d7k2wBnsT7153Mwx1piIGSF0miDEsMSQmhQEuUfDGAg7MncSxIDYPrANp8tv0uUBPUnXwp2CPHg==", + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/@terrestris/react-util/-/react-util-8.0.5.tgz", + "integrity": "sha512-wYLdnbP3u5eU/SNwIPzsYZ/jmJZCUAeBS2qUSrtpO3O/kRVpVkznEcG7guFx9ljUQlFdo/A/SnarjWPW+s1EtA==", "dependencies": { "@camptocamp/inkmap": "^1.4.0", "@terrestris/base-util": "^2.0.0", diff --git a/package.json b/package.json index 5bc1fe98d..4c0798368 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "@fortawesome/react-fontawesome": "^0.2.2", "@terrestris/base-util": "^2.0.0", "@terrestris/ol-util": ">=18", - "@terrestris/react-util": "^8.0.4", + "@terrestris/react-util": "^8.0.5", "@types/lodash": "^4.17.4", "ag-grid-community": "^31.3.2", "ag-grid-react": "^31.3.2", diff --git a/src/CoordinateInfo/CoordinateInfo.example.md b/src/CoordinateInfo/CoordinateInfo.example.md index 0f584a8c1..492bea10c 100644 --- a/src/CoordinateInfo/CoordinateInfo.example.md +++ b/src/CoordinateInfo/CoordinateInfo.example.md @@ -1,207 +1,15 @@ The `CoordinateInfo` component is only a very shallow wrapper around the `useCoordinateInfo` hook of react-util. Often it might be easier to use the hook directly, see the second example on how it's done. -```jsx -import { faCopy } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import CoordinateInfo from '@terrestris/react-geo/dist/CoordinateInfo/CoordinateInfo'; -import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent'; -import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'; -import { - Button, - Spin, - Statistic, - Tooltip -} from 'antd'; -import * as copy from 'copy-to-clipboard'; -import GeoJSON from 'ol/format/GeoJSON.js'; -import { Vector as VectorLayer } from 'ol/layer.js'; -import OlLayerTile from 'ol/layer/Tile'; -import { bbox as bboxStrategy } from 'ol/loadingstrategy.js'; -import OlMap from 'ol/Map'; -import { fromLonLat } from 'ol/proj'; -import OlSourceOSM from 'ol/source/OSM'; -import OlSourceTileWMS from 'ol/source/TileWMS'; -import VectorSource from 'ol/source/Vector.js'; -import OlView from 'ol/View'; -import React, { useEffect, useState } from 'react'; - -const wmsLayer = new OlLayerTile({ - name: 'States (USA)', - source: new OlSourceTileWMS({ - url: 'https://ahocevar.com/geoserver/wms', - params: { - LAYERS: 'usa:states', - TILED: true - }, - serverType: 'geoserver', - crossOrigin: 'anonymous' - }) -}); - -const vectorSource = new VectorSource({ - format: new GeoJSON(), - url: function (extent) { - return ( - 'https://ows-demo.terrestris.de/geoserver/osm/wfs?service=WFS&' + - 'version=1.1.0&request=GetFeature&typename=osm:osm-country-borders&' + - 'outputFormat=application/json&srsname=EPSG:3857&' + - 'bbox=' + - extent.join(',') + - ',EPSG:3857' - ); - }, - strategy: bboxStrategy, -}); - -const vectorLayer = new VectorLayer({ - source: vectorSource, - style: { - 'stroke-width': 0.75, - 'stroke-color': 'white', - 'fill-color': 'rgba(100,100,100,0.25)', - }, -}); - -const CoordinateInfoExample = () => { - - const [map, setMap] = useState(); - - useEffect(() => { - setMap(new OlMap({ - layers: [ - new OlLayerTile({ - name: 'OSM', - source: new OlSourceOSM() - }), - vectorLayer, - wmsLayer - ], - view: new OlView({ - center: fromLonLat([-99.4031637, 38.3025695]), - zoom: 4 - }) - })); - }, []); - - if (!map) { - return null; - } - - return ( - - - { - const features = opts.features; - const clickCoord = opts.clickCoordinate; - const loading = opts.loading; - - const getValue = (feature, key) => { - if (feature.getProperties().hasOwnProperty(key)) { - return feature.get(key); - } - return null; - }; - - return ( - features.length > 0 ? -
-
- - - - -
-
- - - - -
-
: - - Click on a state to get details about the clicked coordinate. - - ); - }} - /> -
- ); -}; - -; -``` - -Here is the same example, but using `useCoordinateInfo` directly: - ```jsx import {faCopy} from '@fortawesome/free-solid-svg-icons'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import CoordinateInfo from '@terrestris/react-geo/dist/CoordinateInfo/CoordinateInfo'; import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent'; import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'; +import useCoordinateInfo from '@terrestris/react-util/dist/Hooks/useCoordinateInfo/useCoordinateInfo'; import { - Button, + Button, Divider, Spin, Statistic, Tooltip @@ -217,8 +25,7 @@ import OlSourceOSM from 'ol/source/OSM'; import OlSourceTileWMS from 'ol/source/TileWMS'; import VectorSource from 'ol/source/Vector.js'; import OlView from 'ol/View'; -import React, {useEffect, useMemo, useState} from 'react'; -import useCoordinateInfo from "@terrestris/react-util/dist/Hooks/useCoordinateInfo/useCoordinateInfo"; +import React, {useEffect, useState} from 'react'; const wmsLayer = new OlLayerTile({ name: 'States (USA)', @@ -266,18 +73,88 @@ const getValue = (feature, key) => { return null; }; +const FeatureInfo = ({ + features, + loading, + clickCoordinate +}) => { + return !loading && features.length > 0 ? +
+
+ + + + +
+
+ + + + +
+
: + + Click on a state to get details about the clicked coordinate. + +}; + const CoordinateInfoExample = () => { const [map, setMap] = useState(); - const { - features, - loading, - clickCoordinate - } = useCoordinateInfo({ - queryLayers - }); - useEffect(() => { setMap(new OlMap({ layers: [ @@ -307,82 +184,34 @@ const CoordinateInfoExample = () => { height: '400px' }} /> - { - features.length > 0 ? -
-
- - - - -
-
- - - - -
-
: - - Click on a state to get details about the clicked coordinate. - - } + +

+ Using the `CoordinateInfo` component +

+ )} + /> + +

+ Using `useCoordinateInfo` in a custom component +

+ ); }; -; +const MyCoordinateInfo = () => { + // The useCoordinateInfo hook needs to run inside a map context + const results = useCoordinateInfo({ + queryLayers + }); + + return ; +}; + +; ``` +