Skip to main content

WeatherOverlay

A map overlay component displaying current weather conditions.

πŸ“‹ Overview​

PropertyValue
Filesrc/components/WeatherOverlay.tsx
TypeReact Functional Component
AuthorUIP Team
Version1.0.0

🎯 Purpose​

  • Display weather conditions on map
  • Show rain, cloud, temperature layers
  • Weather impact on traffic
  • Real-time weather updates

πŸš€ Usage​

import { WeatherOverlay } from '@/components/WeatherOverlay';

function MapComponent() {
return (
<MapContainer>
<WeatherOverlay
data={weatherData}
layers={['rain', 'clouds']}
visible={showWeather}
/>
</MapContainer>
);
}

πŸ“¦ Props​

PropTypeRequiredDefaultDescription
dataWeatherDataYes-Weather data
layersWeatherLayer[]No['rain']Active layers
visiblebooleanNotrueShow/hide overlay
opacitynumberNo0.6Layer opacity

🌦️ Weather Layers​

LayerDisplayData Source
rainPrecipitationOpenWeatherMap
cloudsCloud coverageOpenWeatherMap
tempTemperatureOpenWeatherMap
windWind vectorsOpenWeatherMap

See the complete components reference for all available components.