fix: featurePopup add

Author: sjhoeksma

src/GEOComp.tsx

@@ -20,7 +20,7 @@ import styles from "./styles.module.css";
 import { i18nObjs, trans } from "./i18n/comps";
 import { Geo } from "./vendors";
 import { version } from '../package.json';
-import { animate, showPopup, getFeatures, setFeatures, clearFeatures, deepMerge, parseFilter } from './vendors/helpers'
+import { animate, showPopup, featurePopup, getFeatures, setFeatures, clearFeatures, deepMerge, parseFilter } from './vendors/helpers'
 import { useResizeDetector } from "react-resize-detector";
 import { featureControl } from './FeaturesControl';
 import { geoContext } from './GEOContext';
@@ -461,20 +461,33 @@ GEOComp = withMethodExposing(GEOComp, [
       description: "Displays a popup at the specified coordinates with a given message",
       params: [
         {
-          name: "coordinates",
-          type: "JSONValue", // Assuming [longitude, latitude]
-          description: "Coordinates where the popup should appear",
+          name: "coordinates/featureEvent",
+          type: "JSONValue", // Assuming [longitude, latitude] can also be an featureEvent
+          description: "Coordinates or featureEvent object where the popup should appear",
         },
         {
           name: "message",
           type: "string",
           description: "Message to display in the popup",
-        }
+        },
+        {
+          name: "style",
+          type: "string",
+          description: "Style of popup (optional)",
+        },
       ]
     },
     execute: async (comp: any, params: any) => {
       var map = comp.exposingValues.events['map:init']
-      if (map) showPopup(map, params[0], params[1]);
+      if (map) {
+        switch (params[2]) {
+          case 'features':
+            featurePopup(map, params[0], params[1])
+            break;
+          default:
+            showPopup(map, params[0], params[1]);
+        }
+      }
     }
   },
   {

src/vendors/Geo.jsx

@@ -671,7 +671,7 @@ function Geo(props) {
         // Check for features at the current pointer position
         map.forEachFeatureAtPixel(pixel, function (feature, layer) {
           // If a layer is found and its selectable property is not false
-          console.debug('Hover feature on layer:', layer);
+          //console.debug('Hover feature on layer:', layer);
           if (layer && layer.get('selectable') !== false) {
             cursorStyle = 'pointer'; // Change the cursor to pointer
             return false; // Stop iterating through the features
@@ -712,9 +712,7 @@ function Geo(props) {
       loadLayers(map)
 
       //Add map init event
-      map.once('rendercomplete', () => {
-        fireEvent('map:init', map)
-      })
+      fireEvent('map:init', map)
     }
   }, [props.features, props.projection, props.startDate, props.endDate, geoRef]);
 

src/vendors/helpers/Popup.js

@@ -6,19 +6,11 @@
 import Overlay from 'ol/Overlay';
 import { getCenter } from 'ol/extent';
 import { fromLonLat, transformExtent } from 'ol/proj';
+import { object } from 'prop-types';
 
 
-/**
- * Shows a popup overlay on the provided map at the given coordinates
- * with the specified content message. Creates the popup if it does not
- * already exist.
- * 
- * @param {ol.Map} map The map to show the popup on.
- * @param {ol.Coordinate|ol.Extent} coordinates The popup location as a coordinate pair or extent.
- * @param {string} message The HTML content for the popup.
- */
-export function showPopup(map, coordinates, message) {
-    let popup = map.getOverlayById('infoPopup');
+function getMapPopup(map, name) {
+    let popup = map.getOverlayById(name);
     if (!popup) {
         // Create popup overlay logic
         let popupElement = document.createElement('div');
@@ -43,12 +35,28 @@ export function showPopup(map, coordinates, message) {
             element: popupElement,
             autoPan: true,
             autoPanAnimation: { duration: 250 },
-            id: 'infoPopup'
+            id: name
         });
 
         map.addOverlay(popup);
     }
+    return popup
+}
+/**
+ * Shows a popup overlay on the provided map at the given coordinates
+ * with the specified content message. Creates the popup if it does not
+ * already exist.
+ * 
+ * @param {ol.Map} map The map to show the popup on.
+ * @param {ol.Coordinate|ol.Extent} coordinates The popup location as a coordinate pair or extent.
+ * @param {string} message The HTML content for the popup.
+ */
+export function showPopup(map, coordinates, message) {
+    let popup = getMapPopup(map, 'infoPopup');
 
+    if (coordinates && !Array.isArray(coordinates) && coordinates.extent) {
+        coordinates = coordinates.extent
+    }
     if (Array.isArray(coordinates)) {
         // If coordinates have more than two values, assume it's an extent and calculate its center.
         if (coordinates.length > 2) {
@@ -63,3 +71,24 @@ export function showPopup(map, coordinates, message) {
         popup.setPosition(coordinates);
     }
 }
+
+
+/**
+ * Shows a popup with feature properties in a table. 
+ * Called on map click events. Checks for feature at click location, 
+ * gets its properties, formats them in a table, 
+ * and shows in a popup at the click location.
+ * 
+ * @param  map The map to show the popup on.
+ * @param  event The feature click event
+*/
+export function featurePopup(map, evtObj, title) {
+    let tableHTML = '<tr><th>Property</th><th>Value</th></tr>';
+    // Exclude the geometry property and iterate over the remaining properties
+    delete evtObj.properties.geometry; // Remove geometry property
+    for (const [key, value] of Object.entries(evtObj.properties)) {
+        tableHTML += `<tr><td>${key}</td><td>${value}</td></tr>`;
+    }
+    // Now coordinates will always be a pair here, suitable for setPosition.
+    showPopup(map, evtObj, `${title}<table style="border:1">${tableHTML}</table>`)
+}