feat(poi-layer): add pois to marker select popup

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

@@ -11,6 +11,7 @@ import SelectCarpoolRow from './SelectCarpoolRow';
 import SelectRoadworksRow from './SelectRoadworksRow';
 import SelectChargingStationRow from './SelectChargingStationRow';
 import SelectDatahubPoiRow from './SelectDatahubPoiRow';
+import SelectPublicPoiRow from './SelectPublicPoiRow';
 
 function MarkerSelectPopup(props) {
   const hasStop = () =>
@@ -132,6 +133,19 @@ function MarkerSelectPopup(props) {
         />
       );
     }
+
+    if (option.layer === 'publicPois') {
+      const { lat, lon } = option.coords;
+      return (
+        <SelectPublicPoiRow
+          {...option.feature}
+          key={option.feature.properties.id}
+          latitude={lat}
+          longitude={lon}
+        />
+      );
+    }
+
     return null;
   });
   let id = 'choose-stop';

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import Link from 'found/Link';
+import PropTypes from 'prop-types';
+import pickBy from 'lodash/pickBy';
+import { getLayerByCode } from '../../../util/mapLayerUtils';
+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 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,
+    },
+    value => value !== undefined,
+  );
+
+  return (
+    <Link
+      className="stop-popup-choose-row"
+      to={`/pois/${code}?${new URLSearchParams(params).toString()}`}
+    >
+      <div className="padding-vertical-normal select-row-icon">
+        {svg && <Icon dataURI={`data:image/svg+xml;base64,${btoa(svg)}`} />}
+      </div>
+      <span className="choose-row-center-column">
+        <h5 className="choose-row-header">
+          {name || layer.translations[intl.locale]}
+        </h5>
+      </span>
+      <span className="choose-row-right-column">
+        <Icon img="icon-icon_arrow-collapse--right" />
+      </span>
+      <hr className="no-margin gray" />
+    </Link>
+  );
+}
+
+SelectPublicPoi.propTypes = {
+  properties: PropTypes.object.isRequired,
+  latitude: PropTypes.number.isRequired,
+  longitude: PropTypes.number.isRequired,
+};
+
+SelectPublicPoi.contextTypes = {
+  intl: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
+};

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

@@ -252,6 +252,7 @@ class TileLayerContainer extends GridLayer {
       }
 
       if (
+        selectableTargets.length === 1 &&
         selectableTargets?.find(({ layer }) => {
           return layer === 'publicPois';
         })

app/util/mapLayerUtils.js

@@ -72,6 +72,9 @@ export const isFeatureLayerEnabled = (
   if (!feature || !layerName || !mapLayers) {
     return false;
   }
+  if (layerName === 'publicPois') {
+    return true;
+  }
   if (!Object.keys(mapLayers).includes(layerName)) {
     return false;
   }