feat(public-poi-content): fetch feature details from service

app/component/map/sidebar/PublicPoiContent.js

@@ -1,16 +1,37 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { intlShape, FormattedMessage } from 'react-intl';
 import SidebarContainer from './SidebarContainer';
 import Icon from '../../Icon';
 import OSMOpeningHours from '../popups/OSMOpeningHours';
 import { getLayerByCode } from '../../../util/mapLayerUtils';
 
 const PublicPoiContent = ({ match }, { intl, config }) => {
+  const { osmId, lat, lng } = match.location.query;
+
+  const [code] = match.location.pathname.split('/').reverse();
+
+  const layer = getLayerByCode(code, config);
+
+  const [featureProperties, setFeatureProperties] = useState(null);
+
+  useEffect(() => {
+    fetch(
+      `${config.featuresUrl}/collections/public.pois/items.json?osm_id=${osmId}&category3=${code}`,
+    )
+      .then(response => response.json())
+      .then(({ features }) => {
+        if (features.length) {
+          setFeatureProperties(features[0].properties);
+        }
+      });
+  }, [osmId, code]);
+
+  if (!layer || !featureProperties) {
+    return null;
+  }
+
   const {
-    lat,
-    lng: lon,
-    code,
     name,
     address,
     opening_hours: openingHours,
@@ -22,13 +43,10 @@ const PublicPoiContent = ({ match }, { intl, config }) => {
     internet_access: internetAccess,
     operator,
     brand,
-  } = match.location.query;
+  } = featureProperties;
 
-  const layer = getLayerByCode(code, config);
-
-  if (!layer) {
-    return null;
-  }
+  const latitude = Number(lat);
+  const longitude = Number(lng);
 
   const accessibilityMessage =
     wheelchair === 'yes'
@@ -77,7 +95,7 @@ const PublicPoiContent = ({ match }, { intl, config }) => {
       name={layer.translations[intl.locale] || layer.translations.en}
       description={name}
       dataURI={svg ? `data:image/svg+xml;base64,${btoa(svg)}` : undefined}
-      location={{ lat, lon, address, name }}
+      location={{ lat: latitude, lon: longitude, address: address || name }}
     >
       <div className="content">
         {(address || phone || website) && <div className="divider" />}

app/component/map/tile-layer/SelectPublicPoiRow.js

@@ -8,31 +8,18 @@ import Icon from '../../Icon';
 export default function SelectPublicPoi(props, { config, intl }) {
   const { properties, latitude, longitude } = props;
 
-  const { category3: code, name, address, website, phone } = properties;
+  const { category3: code, name, osm_id: osmId } = properties;
 
   const layer = getLayerByCode(code, config);
 
   const svg = layer?.properties?.icon?.svg;
 
-  const detailsProperties = { ...properties };
-
-  // Filter out properties that are not in the layer's attributes
-  Object.keys(detailsProperties).forEach(key => {
-    if (!layer?.properties?.attributes?.includes(key)) {
-      delete detailsProperties[key];
-    }
-  });
-
   const params = pickBy(
     {
-      ...detailsProperties,
       lat: latitude,
       lng: longitude,
-      code,
       name: name || layer.translations[intl.locale],
-      address,
-      website,
-      phone,
+      osmId,
     },
     value => value !== undefined,
   );

app/component/map/tile-layer/TileLayerContainer.js

@@ -257,33 +257,21 @@ class TileLayerContainer extends GridLayer {
           return layer === 'publicPois';
         })
       ) {
-        const { lat, lon: lng } = selectableTargets[0].coords;
+        const { coords: coordinates, feature } = selectableTargets[0];
 
-        const { properties } = selectableTargets[0].feature;
+        const { lat, lon: lng } = coordinates;
+        const { properties } = feature;
 
-        const { category3: code, name, address, website, phone } = properties;
+        const { category3: code, name, osm_id: osmId } = properties;
 
         const layer = getLayerByCode(code, config);
 
-        const detailsProperties = { ...properties };
-
-        // Filter out properties that are not in the layer's attributes
-        Object.keys(detailsProperties).forEach(key => {
-          if (!layer?.properties?.attributes?.includes(key)) {
-            delete detailsProperties[key];
-          }
-        });
-
         const params = pickBy(
           {
-            ...detailsProperties,
             lat,
             lng,
-            code,
             name: name || layer.translations[intl.locale],
-            address,
-            website,
-            phone,
+            osmId,
           },
           value => value !== undefined,
         );

app/configurations/config.herrenberg.js

@@ -7,6 +7,7 @@ const CONFIG = 'herrenberg';
 const APP_TITLE = 'stadtnavi Herrenberg';
 const APP_DESCRIPTION = 'Gemeinsam Mobilität neu denken - die intermodale Verbindungssuche mit offenen, lokalen Daten';
 const API_URL = process.env.API_URL || 'https://api.stadtnavi.de';
+const FEATURES_URL = 'https://featuredetails.stadtnavi.eu'
 const YEAR = 1900 + new Date().getYear();
 const STATIC_MESSAGE_URL =
     process.env.STATIC_MESSAGE_URL ||
@@ -453,6 +454,8 @@ export default configMerger(parentConfig, {
     layers,
 
     staticMessagesUrl: STATIC_MESSAGE_URL,
+
+    featuresUrl: FEATURES_URL,
 
     parkAndRideBannedVehicleParkingTags: [
         'lot_type:Parkplatz',