feat: readd MapComponent, FloatingMapLogo and BackgroundLayerChooser

terrestris · May 6, 2024 · a32aee4 · a32aee4
1 parent 3b13ce1
commit a32aee4
Show file tree

Hide file tree

Showing 43 changed files with 841 additions and 298 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@terrestris/base-util": "^1.1.0",
     "@terrestris/ol-util": "^17.0.0",
-    "@terrestris/react-util": "^4.0.0",
+    "@terrestris/react-util": "^5.0.0-beta.0",
     "@types/geojson": "^7946.0.14",
     "@types/lodash": "^4.17.0",
     "ag-grid-community": "^31.1.1",

diff --git a/src/BackgroundLayerChooser/BackgroundLayerChooser.example.md b/src/BackgroundLayerChooser/BackgroundLayerChooser.example.md
@@ -2,7 +2,7 @@ The BackgroundLayerChooser
 
 ```jsx
 import BackgroundLayerChooser from '@terrestris/react-geo/dist/BackgroundLayerChooser/BackgroundLayerChooser';
-import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
+import MapComponent from '@terrestris/react-geo/dist/Map/MapComponent/MapComponent';
 import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
 import { useMap } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import OlLayerTile from 'ol/layer/Tile';
@@ -12,63 +12,56 @@ import OlSourceTileWMS from 'ol/source/TileWMS';
 import OlView from 'ol/View';
 import * as React from 'react';
 
-const layers = [
-  new OlLayerTile({
-    source: new OlSourceOsm(),
-    properties: {
-      name: 'OSM',
-      isBackgroundLayer: true
-    }
-  }),
-  new OlLayerTile({
-    visible: false,
-    source: new OlSourceTileWMS({
-      url: 'https://sgx.geodatenzentrum.de/wms_topplus_open',
-      params: {
-        LAYERS: 'web',
+function BackgroundChooserExample() {
+  const layers = [
+    new OlLayerTile({
+      source: new OlSourceOsm(),
+      properties: {
+        name: 'OSM',
+        isBackgroundLayer: true
       }
     }),
-    properties: {
-      name: 'BKG',
-      isBackgroundLayer: true
-    }
-  })
-];
-const openlayersMap = new OlMap({
-  view: new OlView({
-    center: [801045, 6577113],
-    zoom: 9
-  }),
-  layers
-});
-
-function ComponentToUseTheMap() {
-  const map = useMap();
-
-  // This is example specific and usually not needed
-  React.useEffect(() => {
-    map.setTarget('usemap-map');
-  }, [map]);
+    new OlLayerTile({
+      visible: false,
+      source: new OlSourceTileWMS({
+        url: 'https://sgx.geodatenzentrum.de/wms_topplus_open',
+        params: {
+          LAYERS: 'web'
+        },
+        attributions: '© <a href="https://www.bkg.bund.de">Bundesamt für Kartographie und Geodäsie' +
+          `(${new Date().getFullYear()})</a>, ` +
+          '<a href="https://sgx.geodatenzentrum.de/web_public/gdz/datenquellen/Datenquellen_TopPlusOpen.html">' +
+          'Datenquellen</a>'
+      }),
+      properties: {
+        name: 'BKG',
+        isBackgroundLayer: true
+      }
+    })
+  ];
 
-  return (
-    <MapComponent
-      id={'usemap-map'}
-      map={map}
-      style={{
-        height: '400px'
-      }}
-    />
-  );
-}
+  const map = new OlMap({
+    view: new OlView({
+      center: [801045, 6577113],
+      zoom: 9
+    }),
+    layers
+  });
 
-function BackgroundChooserExample() {
   return (
-    <MapContext.Provider value={openlayersMap}>
-      <ComponentToUseTheMap />
-      <BackgroundLayerChooser
-        layers={layers}
-        allowEmptyBackground={true}
-      />
+    <MapContext.Provider value={map}>
+      <MapComponent
+        map={map}
+        style={{
+          position: 'relative',
+          height: '400px'
+        }}
+      >
+        <BackgroundLayerChooser
+          layers={layers}
+          allowEmptyBackground={true}
+        />
+      </MapComponent>
     </MapContext.Provider>
   );
 }