// Real city food maps via Leaflet + OpenStreetMap tiles (CartoDB styles). // Pins use real lat/lng from data-extras.js. HK / LA toggle handled by parent. window.CityFoodMap = (function() { const CITY_CENTER = { HK: { center: [22.3, 114.17], zoom: 12 }, LA: { center: [34.05, -118.28], zoom: 11 }, }; function View({ city = "HK", width = 1000, theme = "light", onSelectSpot }) { const data = window.JAMES_EXTRAS.foodSpotsByCity[city]; const mountRef = React.useRef(null); const mapRef = React.useRef(null); const tileRef = React.useRef(null); const layerRef = React.useRef(null); const height = Math.round(width * 0.56); // Initialize map once React.useEffect(() => { if (!mountRef.current || mapRef.current) return; if (typeof L === "undefined") { mountRef.current.innerHTML = '

Leaflet failed to load.

'; return; } const { center, zoom } = CITY_CENTER[city]; const map = L.map(mountRef.current, { center, zoom, zoomControl: true, scrollWheelZoom: false, attributionControl: true, }); mapRef.current = map; layerRef.current = L.layerGroup().addTo(map); return () => { map.remove(); mapRef.current = null; }; }, []); // Tile layer that adapts to theme React.useEffect(() => { const map = mapRef.current; if (!map) return; if (tileRef.current) { map.removeLayer(tileRef.current); tileRef.current = null; } const tileUrl = theme === "dark" ? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png" : "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"; tileRef.current = L.tileLayer(tileUrl, { attribution: '© OpenStreetMap · © CARTO', subdomains: "abcd", maxZoom: 19, }).addTo(map); }, [theme]); // Re-target map + redraw pins when city or data changes React.useEffect(() => { const map = mapRef.current; const layer = layerRef.current; if (!map || !layer) return; const { center, zoom } = CITY_CENTER[city]; map.setView(center, zoom, { animate: true }); layer.clearLayers(); const accent = getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#d73a49"; const paper = getComputedStyle(document.documentElement).getPropertyValue("--paper").trim() || "#fffaf0"; const ink = getComputedStyle(document.documentElement).getPropertyValue("--ink").trim() || "#1a1612"; data.spots.forEach(s => { const isBar = s.kind === "bar"; const pinColor = isBar ? "#1a1612" : accent; const icon = L.divIcon({ className: "jg-food-pin", html: `

`, iconSize: [14, 14], iconAnchor: [7, 7], }); const m = L.marker([s.lat, s.lng], { icon }) .addTo(layer) .bindTooltip( `

${s.name}${isBar ? ' · BAR' : ""}

${s.neighborhood.toUpperCase()}

${s.dish}

${"★".repeat(s.rating)}${"★".repeat(5 - s.rating)}

`, { direction: "top", offset: [0, -6], opacity: 1, className: "jg-food-tooltip" } ); if (onSelectSpot) m.on("click", () => onSelectSpot(s)); }); // Fit bounds around the pins so LA's spread stays visible const bounds = L.latLngBounds(data.spots.map(s => [s.lat, s.lng])); if (bounds.isValid()) map.fitBounds(bounds, { padding: [40, 40], maxZoom: 13 }); }, [city, data]); // Resize handling React.useEffect(() => { const map = mapRef.current; if (!map) return; setTimeout(() => map.invalidateSize(), 0); }, [width]); return (

); } return { View }; })();