${weatherIcon}

\n ${temperature !== undefined ? `\n

\n ${temperature}°C\n

\n ` : ''}\n

\n `;\n\n const customIcon = L.divIcon({\n html: iconHtml,\n className: 'custom-weather-marker',\n iconSize: [60, 80],\n iconAnchor: [30, 40]\n });\n\n const marker = L.marker([location.latitude, location.longitude], { \n icon: customIcon \n }).addTo(mapInstanceRef.current);\n\n // Create popup content\n const popupContent = createPopupContent(location, weatherData);\n marker.bindPopup(popupContent, {\n className: 'weather-popup',\n maxWidth: 300\n });\n\n // Handle marker click\n marker.on('click', () => {\n onLocationSelect(location);\n });\n\n markersRef.current.push(marker);\n });\n }, [locations, allWeatherData, selectedLocation, onLocationSelect]);\n\n const getWeatherIcon = (weatherCode: number, isDay?: boolean): string => {\n const isDayTime = isDay !== false; // Default to day if undefined\n \n switch (weatherCode) {\n case 0: return isDayTime ? '☀️' : '🌙';\n case 1: return isDayTime ? '🌤️' : '🌙';\n case 2: return '⛅';\n case 3: return '☁️';\n case 45:\n case 48: return '🌫️';\n case 51:\n case 53:\n case 55:\n case 56:\n case 57: return '🌦️';\n case 61:\n case 63:\n case 65:\n case 66:\n case 67: return '🌧️';\n case 71:\n case 73:\n case 75:\n case 77:\n case 85:\n case 86: return '🌨️';\n case 80:\n case 81:\n case 82: return '🌦️';\n case 95:\n case 96:\n case 99: return '⛈️';\n default: return isDayTime ? '☀️' : '🌙';\n }\n };\n\n const createPopupContent = (location: NYCLocation, weatherData?: WeatherData): string => {\n if (!weatherData) {\n return `\n

${location.name}

${location.borough}

Weather data loading...

\n `;\n }\n\n const { current } = weatherData;\n const weatherIcon = getWeatherIcon(current.weatherCode, current.isDay);\n\n return `\n

${location.name}

\n ${location.borough}\n

${weatherIcon}

\n \n

${current.temperature}°C

${current.weatherDescription}

\n \n

\n 💧\n ${current.humidity}%\n

\n 💨\n ${current.windSpeed} km/h\n

\n 🌡️\n ${current.pressure} hPa\n

\n 👁️\n ${current.visibility} km\n

\n \n

\n `;\n };\n\n // Listen for custom events from popup buttons\n useEffect(() => {\n const handleSelectLocation = (event: any) => {\n const locationId = event.detail;\n const location = locations.find(loc => loc.id === locationId);\n if (location) {\n onLocationSelect(location);\n }\n };\n\n window.addEventListener('selectLocation', handleSelectLocation);\n return () => window.removeEventListener('selectLocation', handleSelectLocation);\n }, [locations, onLocationSelect]);\n\n return (\n

\n );\n};\n\nexport default WeatherMap;","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/boristane/Test/code/frontend/components/WeatherMap.tsx","extension","actionData","errors"]