feat: added markers styling

e2e-tests/e2e_test_data_initial.json

@@ -112,7 +112,7 @@
         "is_free": "true",
         "speed_limit": "10",
         "amenities": [
-          "benches"
+          "toilets"
         ],
         "uuid": "5986e755-1eaa-4121-a01c-4fef1d5d1da1"
       },
@@ -272,6 +272,20 @@
         "cars"
       ]
     },
+    "marker_styles": {
+      "icon_field": "type_of_place",
+      "color_field": "speed_limit",
+      "icons": {
+        "big bridge": "https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2/assets/fill/bridge-fill.svg",
+        "small bridge": "https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2/assets/fill/footprints-fill.svg"
+      },
+      "colors": {
+        "10": "#2e7d32",
+        "30": "#ef6c00",
+        "50": "#c62828"
+      },
+      "default_color": "#2a81cb"
+    },
     "visible_data": [
       "remark",
       "accessible_by",

e2e-tests/tests/basic/test_marker_styles.py

@@ -0,0 +1,104 @@
+"""
+Marker Styles Tests
+
+Tests that the map picks pin icon/color per marker_styles (icon_field:
+type_of_place, color_field: speed_limit - see e2e_test_data_initial.json), and
+that a location with both a remark and a marker_styles match keeps its
+type/color styling with an asterisk badge overlay, rather than losing it to
+the plain asterisk icon (see getTypedMarkerIcon.jsx/MarkerPopup.jsx).
+"""
+
+from playwright.sync_api import Page, expect
+
+from tests.conftest import BASE_URL, MARKER_LOAD_TIMEOUT, open_test_popup
+
+# "big bridge" and "small bridge" each get their own Phosphor Icons (MIT) type
+# icon - see e2e_test_data_initial.json's marker_styles.icons and
+# getTypedMarkerIcon.jsx (icon URLs are CSS mask-image'd onto the pin, tinted
+# by the matched color, rather than embedded as inline SVG path data).
+BIG_BRIDGE_TYPE_ICON_URL = (
+    "https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2/assets/fill/bridge-fill.svg"
+)
+SMALL_BRIDGE_TYPE_ICON_URL = (
+    "https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2/assets/fill/footprints-fill.svg"
+)
+
+
+class TestMarkerStyles:
+    """Test suite for marker_styles-driven pin icons/colors"""
+
+    def test_fast_bridge_marker_uses_type_icon_and_red_speed_color(self, page: Page):
+        """Pokoju (big bridge, speed_limit=50, no remark) is the only seeded bridge
+        with all three of lighting+benches+toilets (amenities is an "and" category -
+        see test_and_filter_within_category_narrows_results in test_map.py), so
+        checking all three isolates its marker without relying on clustering
+        distance/zoom assumptions."""
+        page.goto(BASE_URL, wait_until="domcontentloaded")
+
+        # "cars" is checked by default (Pokoju is cars-accessible); narrow further.
+        for amenity in ("lighting", "benches", "toilets"):
+            page.get_by_role("checkbox", name=amenity, exact=False).click()
+
+        marker = page.locator(".custom-typed-marker-icon")
+        expect(marker).to_have_count(1, timeout=MARKER_LOAD_TIMEOUT)
+
+        # The pin shape itself (a masked div, not an inline <path>), filled with
+        # speed_limit=50's color.
+        pin = marker.locator(".custom-typed-marker-pin")
+        expect(pin).to_have_css("background-color", "rgb(198, 40, 40)")  # #c62828
+        # The type_of_place icon, configured for "big bridge" - masked onto a div
+        # via CSS rather than embedded as an inline <path>.
+        type_icon = marker.locator(".custom-typed-marker-type-icon")
+        expect(type_icon).to_have_count(1)
+        expect(type_icon).to_have_css("mask-image", f'url("{BIG_BRIDGE_TYPE_ICON_URL}")')
+        # No remark on Pokoju, so no asterisk badge.
+        expect(marker.locator("span")).to_have_count(0)
+
+    def test_slow_bridge_marker_uses_type_icon_and_green_speed_color(self, page: Page):
+        """Piaskowy (small bridge, speed_limit=10, no remark, toilets) is the
+        only seeded speed<=10 bridge with toilets - the other two speed=10
+        bridges (Zwierzyniecka, Tumski) have lighting/benches but neither has
+        toilets, so combining the speed_limit=10 radio with the toilets
+        checkbox isolates it without relying on clustering distance/zoom
+        assumptions. "cars" is unchecked first since Piaskowy is
+        pedestrians-only."""
+        page.goto(BASE_URL, wait_until="domcontentloaded")
+
+        page.get_by_role("checkbox", name="cars", exact=False).click()
+        page.get_by_role("radio", name="10 km/h", exact=False).click()
+        page.get_by_role("checkbox", name="toilets", exact=False).click()
+
+        marker = page.locator(".custom-typed-marker-icon")
+        expect(marker).to_have_count(1, timeout=MARKER_LOAD_TIMEOUT)
+
+        pin = marker.locator(".custom-typed-marker-pin")
+        expect(pin).to_have_css("background-color", "rgb(46, 125, 50)")  # #2e7d32 (speed_limit=10)
+        type_icon = marker.locator(".custom-typed-marker-type-icon")
+        expect(type_icon).to_have_count(1)
+        expect(type_icon).to_have_css("mask-image", f'url("{SMALL_BRIDGE_TYPE_ICON_URL}")')
+        # No remark on Piaskowy, so no asterisk badge.
+        expect(marker.locator("span")).to_have_count(0)
+
+    def test_remarked_bridge_keeps_type_and_color_styling_with_asterisk_badge(self, page: Page):
+        """Zwierzyniecka has both a remark and marker_styles-matching fields
+        (small bridge, speed_limit=10) - it should render its normal typed/colored
+        pin plus an asterisk badge, not fall back to the plain asterisk icon
+        (every type_of_place/speed_limit value happens to be covered by
+        marker_styles in this seeded dataset, so that plain-icon fallback path
+        isn't exercised here - it's covered at the unit level instead, see
+        getTypedMarkerIcon.test.jsx's "falls back to the plain asterisk icon"
+        case)."""
+        page.goto(BASE_URL, wait_until="domcontentloaded")
+        open_test_popup(page)
+
+        expect(page.locator('img[alt="Marker-Asterisk"]')).to_have_count(0)
+
+        marker = page.locator(".custom-typed-marker-icon")
+        expect(marker).to_have_count(1, timeout=MARKER_LOAD_TIMEOUT)
+
+        pin = marker.locator(".custom-typed-marker-pin")
+        expect(pin).to_have_css("background-color", "rgb(46, 125, 50)")  # #2e7d32 (speed_limit=10)
+        type_icon = marker.locator(".custom-typed-marker-type-icon")
+        expect(type_icon).to_have_count(1)
+        expect(type_icon).to_have_css("mask-image", f'url("{SMALL_BRIDGE_TYPE_ICON_URL}")')
+        expect(marker.locator("span")).to_have_text("*")

frontend/src/components/MarkerPopup/MarkerPopup.jsx

@@ -10,6 +10,7 @@
 import LocationDetailsBox from './LocationDetails';
 import MobilePopup from './MobilePopup';
 import DesktopPopup from './DesktopPopup';
+import getTypedMarkerIcon from './getTypedMarkerIcon';
 import iconAsterisk from '../../res/img/marker-icon-asterisk.png';
 
 /**
@@ -37,7 +38,7 @@
                 }
             } catch (error) {
                 if (isMounted) {
                     console.error('Failed to fetch location:', error);
                     setPlace({ error: true });
                 }
             }
@@ -122,9 +123,16 @@
         alt: place.has_remark ? 'Marker-Asterisk' : 'Marker',
     };
 
-    // Only add icon prop if we have a custom icon (for remarks)
-    // This prevents passing undefined which can cause issues with MarkerClusterGroup
-    if (place.has_remark) {
+    // Prefer a marker_styles match (getTypedMarkerIcon adds an asterisk badge to
+    // it when place.has_remark is set, so a remarked location keeps its type/color
+    // styling) and only fall back to the plain asterisk icon when there's no
+    // match to style - e.g. a legacy/unconfigured deployment. Only add an icon
+    // prop when we actually have a custom icon: passing icon={undefined} causes
+    // errors in MarkerClusterGroup during cluster zoom animations.
+    const typedIcon = getTypedMarkerIcon(place);
+    if (typedIcon) {
+        markerProps.icon = typedIcon;
+    } else if (place.has_remark) {
         markerProps.icon = asteriskIcon;
     }
 

frontend/src/components/MarkerPopup/ReportProblemForm.jsx

@@ -212,7 +212,7 @@ const ReportProblemForm = ({ placeId }) => {
     if (schemaError) {
         return (
             <ErrorMessage>
-                {t('loadReportFormError')}
+                <span role="alert">{t('loadReportFormError')}</span>
                 <div>
                     <RetryButton type="button" onClick={refetchLocationSchema}>
                         {t('retry')}

frontend/src/components/MarkerPopup/getTypedMarkerIcon.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DivIcon } from 'leaflet';
+import ReactDOMServer from 'react-dom/server';
+// Phosphor Icons "map-pin-simple" (fill style), MIT license, phosphoricons.com -
+// vendored locally (see the .svg file) instead of fetched from a CDN, since
+// it's a fixed asset we chose, not deployment config, and every styled marker
+// on every deployment depends on it.
+// TODO make pin shape configurable
+import PIN_SHAPE_URL from '../../res/svg/marker-pin.svg';
+
+const PIN_WIDTH = 72;
+const PIN_HEIGHT = 80;
+const FALLBACK_COLOR = globalThis.SECONDARY_COLOR || 'black';
+
+const TYPE_ICON_SIZE = 24;
+
+// Because the pin shape is not a perfectly aligned, anchor point is not at the bottom of the pin
+// we need to adjust the anchor and popup positions accordingly
+const TYPE_ICON_OFFSET_TOP = 10;
+const TYPE_ICON_OFFSET_LEFT = 24;
+
+// The pin's own artwork doesn't reach the bottom of its viewBox, so the
+// anchor Leaflet pins to the map coordinate has to target the actual
+// rendered tip, not the box edge, or the marker floats above its true
+// location. Measured empirically from a screenshot rather than the raw path
+// coordinates, since drop-shadow/antialiasing shift the rendered edge a bit.
+const STEM_TIP_FRACTION = 0.8875;
+
+const maskStyle = (url, color) => ({
+    backgroundColor: color,
+    WebkitMaskImage: `url(${url})`,
+    maskImage: `url(${url})`,
+    WebkitMaskSize: '100% 100%',
+    maskSize: '100% 100%',
+    WebkitMaskRepeat: 'no-repeat',
+    maskRepeat: 'no-repeat',
+});
+
+/**
+ * Pin shape masked to `color`, optionally holding a type icon (`typeIconUrl`) inside
+ * its head, and an asterisk badge when `hasRemark` is set - so a remarked
+ * location keeps its type/color styling instead of losing it to a plain
+ * asterisk marker.
+ */
+const PinIcon = ({ color, typeIconUrl, hasRemark }) => (
+    <div style={{ position: 'relative', width: PIN_WIDTH, height: PIN_HEIGHT }}>
+        <div
+            className="custom-typed-marker-pin"
+            style={{
+                position: 'absolute',
+                inset: 0,
+                filter: 'drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)',
+                ...maskStyle(PIN_SHAPE_URL, color),
+            }}
+        />
+        {typeIconUrl !== '' && (
+            <div
+                className="custom-typed-marker-type-icon"
+                style={{
+                    position: 'absolute',
+                    top: TYPE_ICON_OFFSET_TOP,
+                    left: TYPE_ICON_OFFSET_LEFT,
+                    width: TYPE_ICON_SIZE,
+                    height: TYPE_ICON_SIZE,
+                    ...maskStyle(typeIconUrl, '#ffffff'),
+                }}
+            />
+        )}
+        {hasRemark && (
+            <span
+                style={{
+                    position: 'absolute',
+                    top: -3,
+                    left: 38,
+                    fontSize: 36,
+                    fontWeight: 'bold',
+                    lineHeight: 1,
+                    color: '#ffffff',
+                    textShadow: [-1, 1]
+                        .flatMap(x => [-1, 1].map(y => `${x}px ${y}px 0 ${color}`))
+                        .join(', '),
+                }}
+            >
+                *
+            </span>
+        )}
+    </div>
+);
+
+PinIcon.propTypes = {
+    color: PropTypes.string.isRequired,
+    typeIconUrl: PropTypes.string.isRequired,
+    hasRemark: PropTypes.bool.isRequired,
+};
+
+/**
+ * Builds a Leaflet icon for `place` from the deployment's marker styling
+ * lookup table (window.MARKER_STYLES, see goodmap's db.get_marker_styles), or
+ * `null` when neither `icon_field` nor `color_field` matched - callers should
+ * omit the `icon` prop then and fall back to Leaflet's default marker (or the
+ * plain asterisk icon for a remarked location).
+ *
+ * @param {Object} place - Location data, as returned by GET /api/locations
+ * @returns {import('leaflet').DivIcon|null}
+ */
+const getTypedMarkerIcon = place => {
+    const markerStyles = globalThis.MARKER_STYLES || {};
+    const {
+        icon_field: iconField,
+        color_field: colorField,
+        icons,
+        colors,
+        default_color: defaultColor,
+    } = markerStyles;
+
+    const typeIconUrl = icons?.[place[iconField]] || '';
+    const matchedColor = colors?.[place[colorField]] || '';
+
+    if (!typeIconUrl && !matchedColor) {
+        return null;
+    }
+
+    return new DivIcon({
+        html: ReactDOMServer.renderToString(
+            <PinIcon
+                color={matchedColor || defaultColor || FALLBACK_COLOR}
+                typeIconUrl={typeIconUrl}
+                hasRemark={Boolean(place.has_remark)}
+            />,
+        ),
+        className: 'custom-typed-marker-icon',
+        iconSize: [PIN_WIDTH, PIN_HEIGHT],
+        iconAnchor: [PIN_WIDTH / 2, PIN_HEIGHT * STEM_TIP_FRACTION],
+        popupAnchor: [0, -PIN_HEIGHT * STEM_TIP_FRACTION],
+    });
+};
+
+export default getTypedMarkerIcon;