Merge pull request #42 from M3nin0/dev

contrib: adding tooltip support in the metadata viewer
geo-knowledge-hub · Sep 6, 2023 · 41833a8 · 41833a8
2 parents b6e5900 + 448eaff
commit 41833a8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/src/lib/components/layers/base/GeoJSONLayer.js b/src/lib/components/layers/base/GeoJSONLayer.js
@@ -23,7 +23,7 @@ import { useLeafletContext } from '@react-leaflet/core';
  * @param {Object} geoJsonData GeoJSON Data to be added in the Layer.
  * @returns {null}
  */
-export const GeoJSONLayer = ({ geoJsonData }) => {
+export const GeoJSONLayer = ({ geoJsonData, options }) => {
   const context = useLeafletContext();
 
   const propsRef = useRef(geoJsonData);
@@ -36,7 +36,7 @@ export const GeoJSONLayer = ({ geoJsonData }) => {
     const geometryData = propsRef.current;
 
     if (!_isEmpty(geometryData)) {
-      geometryLayerRef.current = L.geoJSON().addTo(container);
+      geometryLayerRef.current = L.geoJSON(undefined, options).addTo(container);
       geometryLayerRef.current.addData(geometryData);
 
       // adjusting the map bounds

diff --git a/src/lib/components/layers/control/MouseCoordinateControl/base.css b/src/lib/components/layers/control/MouseCoordinateControl/base.css
@@ -4,5 +4,9 @@
   padding: 0 5px;
   margin: 0;
   color: #333;
-  font: 13px/1.5 'Helvetica Nueu', Arial, Helvetica, sans-serif;
+  font:
+    13px/1.5 'Helvetica Nueu',
+    Arial,
+    Helvetica,
+    sans-serif;
 }
diff --git a/src/lib/contrib/landing/viewers/GeographicMetadataLocationViewer.js b/src/lib/contrib/landing/viewers/GeographicMetadataLocationViewer.js
@@ -9,6 +9,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import _get from 'lodash/get';
 import _pick from 'lodash/pick';
 import _isNil from 'lodash/isNil';
 import _compact from 'lodash/compact';
@@ -37,13 +38,19 @@ export const GeographicMetadataLocationViewer = ({
       featuresData.map((feature) => {
         const geometryData = _pick(feature, ['geometry']);
 
+        const place = _get(feature, 'place');
+        const description = _get(feature, 'description');
+
         if (_isNil(geometryData) || _isEmpty(geometryData)) {
           return null;
         }
 
         return {
           type: 'Feature',
-          properties: {},
+          properties: {
+            place,
+            description,
+          },
           ...geometryData,
         };
       })
@@ -66,7 +73,30 @@ export const GeographicMetadataLocationViewer = ({
       <BaseMapLayers {...mapConfig} />
 
       {featureCollection ? (
-        <GeoJSONLayer geoJsonData={featureCollection} />
+        <GeoJSONLayer
+          geoJsonData={featureCollection}
+          options={{
+            onEachFeature: (feature, layer) => {
+              const placeText = _get(feature, 'properties.place', '');
+              const descriptionText = _get(
+                feature,
+                'properties.description',
+                ''
+              );
+
+              if (placeText || descriptionText) {
+                layer.bindPopup(`
+              <h4>${placeText}</h4>
+              <p>${descriptionText}</p>
+            `);
+              } else {
+                layer.bindPopup(
+                  "This geometry doesn't have any extra information"
+                );
+              }
+            },
+          }}
+        />
       ) : null}
     </MapContainer>
   );