Add POIs and journey times to map

frontend/src/App.tsx

@@ -10,7 +10,7 @@ import type {
   ApiResponse,
   POI,
   POIResponse,
-  POICategoryGroup,
+  POICategoriesMap,
   ColorMode,
 } from './types';
 
@@ -55,23 +55,30 @@ export default function App() {
 
   // POI state
   const [pois, setPois] = useState<POI[]>([]);
-  const [selectedPOICategories, setSelectedPOICategories] = useState<Set<POICategoryGroup>>(
-    new Set()
-  );
+  const [poiCategories, setPOICategories] = useState<POICategoriesMap>({});
+  const [selectedPOICategories, setSelectedPOICategories] = useState<Set<string>>(new Set());
   const poiDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const poiAbortControllerRef = useRef<AbortController | null>(null);
 
+  // Fetch POI category definitions from server on mount
+  useEffect(() => {
+    fetch(`${getApiBaseUrl()}/api/poi-categories`)
+      .then((res) => res.json())
+      .then((json: { categories: POICategoriesMap }) => {
+        setPOICategories(json.categories);
+      })
+      .catch((err) => console.error('Failed to fetch POI categories:', err));
+  }, []);
+
   // Debounced fetch when dependencies change
   useEffect(() => {
     if (!bounds) return;
 
-    // Clear previous debounce timer
     if (debounceRef.current) {
       clearTimeout(debounceRef.current);
     }
 
     debounceRef.current = setTimeout(async () => {
-      // Cancel any in-flight request
       if (abortControllerRef.current) {
         abortControllerRef.current.abort();
       }
@@ -167,6 +174,7 @@ export default function App() {
         filters={filters}
         onChange={setFilters}
         zoom={zoom}
+        poiCategories={poiCategories}
         selectedPOICategories={selectedPOICategories}
         onPOICategoriesChange={setSelectedPOICategories}
         colorMode={colorMode}