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,106 @@
+"""
+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 a
+plain, unstyled asterisk badge (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 our own pin in the plain
+        fallback color with no type icon (every type_of_place/speed_limit value
+        happens to be covered by marker_styles in this seeded dataset, so that
+        fallback-color path isn't exercised here - it's covered at the unit
+        level instead, see getTypedMarkerIcon.test.jsx's "returns our own pin in
+        the fallback color with just the badge" case). Also guards against ever
+        reintroducing the old PNG-based asterisk icon this replaced.
+        """
+        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

@@ -2,15 +2,14 @@
 import PropTypes from 'prop-types';
 import { Marker } from 'react-leaflet';
 import { isMobile } from 'react-device-detect';
-import { Icon } from 'leaflet';
 import { useTranslation } from 'react-i18next';
 import httpService from '../../services/http/httpService';
 import useMapStore from '../Map/store/map.store';
 
 import LocationDetailsBox from './LocationDetails';
 import MobilePopup from './MobilePopup';
 import DesktopPopup from './DesktopPopup';
-import iconAsterisk from '../../res/img/marker-icon-asterisk.png';
+import getTypedMarkerIcon from './getTypedMarkerIcon';
 
 /**
  * Wrapper component that fetches full location details and renders them in a popup.
@@ -37,7 +36,7 @@
                 }
             } catch (error) {
                 if (isMounted) {
                     console.error('Failed to fetch location:', error);
                     setPlace({ error: true });
                 }
             }
@@ -69,25 +68,14 @@
     }).isRequired,
 };
 
-/**
- * Custom Leaflet icon for markers with remarks/special annotations.
- * Displays an asterisk icon to visually distinguish remarked locations from standard markers.
- */
-const asteriskIcon = new Icon({
-    iconUrl: iconAsterisk,
-    iconSize: [40, 48], // size of the icon
-    iconAnchor: [19, 46], // point of the icon which will correspond to marker's location
-    popupAnchor: [0, -40], // point from which the popup should open relative to the iconAnchor
-});
-
 /**
  * Interactive map marker component that displays location details in a popup when clicked.
  * Supports special visual indication for locations with remarks using an asterisk icon.
  *
  * @param {Object} props - Component props
  * @param {Object} props.place - Location data object
  * @param {number[]} props.place.position - Coordinates [latitude, longitude]
- * @param {boolean} [props.place.has_remark] - Whether this location has a remark (uses asterisk icon if true)
+ * @param {boolean} [props.place.has_remark] - Whether this location has a remark (adds an asterisk badge if true)
  * @returns {React.ReactElement} Leaflet Marker component with click-to-show-details functionality
  */
 const MarkerPopup = ({ place }) => {
@@ -119,13 +107,20 @@
         eventHandlers: {
             click: handleMarkerClick,
         },
-        alt: place.has_remark ? 'Marker-Asterisk' : 'Marker',
+        // getTypedMarkerIcon renders as a <div>, not an <img>, so 'alt' has no
+        // visible effect once it returns an icon - kept as plain text for the
+        // one case it still applies to: Leaflet's own default marker below.
+        alt: '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) {
-        markerProps.icon = asteriskIcon;
+    // getTypedMarkerIcon returns our own pin whenever there's a marker_styles
+    // match or a remark to badge, null only for a plain, unremarked location -
+    // which then falls back to Leaflet's default marker. 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;
     }
 
     return (

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,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DivIcon } from 'leaflet';
+import ReactDOMServer from 'react-dom/server';
+// Custom balloon pin (sharp point, solid head, no third-party asset/CDN) - see
+// the .svg file. Its point sits exactly on the viewBox's bottom edge, so the
+// anchor below doesn't need any empirical correction the way a borrowed icon
+// with its own padding would.
+import PIN_SHAPE_URL from '../../res/svg/marker-pin.svg';
+
+const PIN_WIDTH = 36;
+const PIN_HEIGHT = 40;
+const FALLBACK_COLOR = globalThis.SECONDARY_COLOR || 'black';
+
+const TYPE_ICON_SIZE = 16;
+const TYPE_ICON_OFFSET_TOP = 6.5;
+const TYPE_ICON_OFFSET_LEFT = 10;
+
+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 (or just its fallback color,
+ * if nothing else matched) instead of losing it to an unrelated asterisk icon.
+ */
+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: 1,
+                    left: 19,
+                    fontSize: 17,
+                    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`: colored/typed from the deployment's
+ * marker styling lookup table (window.MARKER_STYLES, see goodmap's
+ * db.get_marker_styles) when it matches, our own pin in the fallback color
+ * with just the asterisk badge when `place.has_remark` is set but nothing
+ * matched, or `null` (falls back to Leaflet's default marker) when there's
+ * neither a match nor a remark to show.
+ *
+ * @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]] || '';
+    const hasRemark = Boolean(place.has_remark);
+
+    if (!typeIconUrl && !matchedColor && !hasRemark) {
+        return null;
+    }
+
+    return new DivIcon({
+        html: ReactDOMServer.renderToString(
+            <PinIcon
+                color={matchedColor || defaultColor || FALLBACK_COLOR}
+                typeIconUrl={typeIconUrl}
+                hasRemark={hasRemark}
+            />,
+        ),
+        className: 'custom-typed-marker-icon',
+        iconSize: [PIN_WIDTH, PIN_HEIGHT],
+        iconAnchor: [PIN_WIDTH / 2, PIN_HEIGHT],
+        popupAnchor: [0, -PIN_HEIGHT],
+    });
+};
+
+export default getTypedMarkerIcon;

frontend/tests/MarkerPopup/MarkerPopup.test.jsx

@@ -105,7 +105,7 @@ describe('MarkerPopup with remark', () => {
         globalThis.fetch.mockRestore();
     });
 
-    it('should render marker popup with asterisks when remark is true', () => {
+    it('should render our own pin with an asterisk badge when remark is true', () => {
         // eslint-disable-next-line camelcase -- matches backend API schema property name
         const locationWhenRemarkIsTrue = { ...location, has_remark: true };
         act(() => {
@@ -122,7 +122,9 @@ describe('MarkerPopup with remark', () => {
                 </MapContainer>,
             );
         });
-        expect(screen.getByAltText(/Marker-Asterisk/i)).toBeInTheDocument();
+        const marker = document.querySelector('.custom-typed-marker-icon');
+        expect(marker).toBeInTheDocument();
+        expect(marker.querySelector('span')).toHaveTextContent('*');
     });
 
     it('should pass custom icon prop when remark is true', () => {
@@ -140,15 +142,14 @@ describe('MarkerPopup with remark', () => {
             );
         });
 
-        const marker = screen.getByAltText(/Marker-Asterisk/i);
-        const leafletMarker = marker.closest('.leaflet-marker-icon');
+        const marker = document.querySelector('.custom-typed-marker-icon');
 
-        // When remark is true, marker should have custom asterisk icon
-        expect(leafletMarker).toBeInTheDocument();
+        // When remark is true, marker should have our own pin, not Leaflet's default icon
+        expect(marker).toBeInTheDocument();
 
-        // Verify custom asterisk icon dimensions (40x48) are applied
-        const style = window.getComputedStyle(leafletMarker);
-        expect(style.width).toBe('40px'); // asteriskIcon width
-        expect(style.height).toBe('48px'); // asteriskIcon height
+        // Verify our pin's dimensions (36x40) are applied, not Leaflet's default (25x41)
+        const style = window.getComputedStyle(marker);
+        expect(style.width).toBe('36px');
+        expect(style.height).toBe('40px');
     });
 });