Markers reflect current filtered result set; filter changes update markers

When map markers do not update after a filter change, users see stale, incorrect data — listings that do not match their criteria appear pinned to the map while the sidebar list updates. This is a functional-suitability violation under ISO 25010:2011 and a concrete data-integrity failure: the map and the list are out of sync, making the product untrustworthy. Users applying category or distance filters to find, say, open restaurants or accessible venues receive misleading results that can send them to wrong locations. The defect is critical because it silently corrupts the user's decision-making.

Subscribe the marker layer directly to the filter state variable so any filter change triggers a marker refresh. The marker update must run synchronously within the same render cycle as the filter change — not on a separate effect with a delay.

function Map({ filters }) {
  const map = useMap();

  useEffect(() => {
    if (!map) return;
    const filtered = listings.filter(l =>
      filters.category ? l.category === filters.category : true
    );
    updateMarkers(map, filtered); // replaces all existing markers
  }, [filters, map]);

  return <div id="map" />;
}

Ensure updateMarkers clears all existing markers before adding filtered ones — partial updates where old markers linger are the most common cause of the desync failure.

• ID: directory-map-location.map-rendering.markers-sync-filters

• Severity: critical

• What to look for: Examine filtering logic (e.g., by category, rating, distance). Check whether marker rendering is tied to the filtered result set. Apply a filter and verify that markers update immediately. Look for any lag or race conditions where old markers remain visible after filtering.

• Pass criteria: When filters change (category selection, radius adjustment, etc.), markers update to reflect only listings matching the new filters. Enumerate all filter controls and confirm each triggers a marker refresh. Old markers disappear and new ones appear within no more than 200 milliseconds. Quote the actual filter state variable or hook name used to drive marker updates.

• Fail criteria: Markers do not update when filters change, or old markers remain visible alongside new ones. Filter changes do not affect the map display. A filter that only updates a list but not the map does not count as pass.

• Skip (N/A) when: No filtering or dynamic marker updates exist.

• Cross-reference: Compare with directory-map-location.map-rendering.clustering-implemented — clustered markers must also respect filter changes.

• Detail on fail: "Changing category filter does not update markers on map — markers from all categories remain visible" or "Filter changes lag; old markers visible for 1-2 seconds after filter applied"

• Remediation: Ensure the marker layer subscribes to filter state changes. In a React/Mapbox setup:

  function Map({ filters }) {
    const map = useMap();
  
    useEffect(() => {
      if (!map) return;
      const filtered = listings.filter(l =>
        filters.category ? l.category === filters.category : true
      );
      updateMarkers(map, filtered);
    }, [filters, map]);
  
    return <div id="map" />;
  }