How bariskisir/worldweathermonitor works
WorldWeatherMonitor is a React-based interactive world weather map. Users browse a Leaflet map or search for a place; selecting a location focuses the map, while clicking a weather marker opens detailed forecasts and related conditions. The map queries a background worker for viewport locations and requests weather data as markers are needed. The README also documents animated conditions, air quality, and hourly and 7-day forecasts. Source excerpts are partial, so uncertain internal wiring is omitted; unsampled features are represented only where supported by the README and tree.
Main entry points: App.tsx App coordinator · WeatherPopup.tsx Weather details · MapScene.tsx Map and markers · weatherApi.ts Weather API client
Components 22
App experience
- App coordinator
src/react/ui/App.tsx - Location search
src/react/features/search/SearchBar.tsx - Settings dialog
src/react/features/settings/SettingsModal.tsx - Weather details
src/react/features/popup/WeatherPopup.tsx - Forecast charts
src/react/components/WeatherChart.tsx - Weather animation
src/react/legacy/WeatherAnimation.ts
Map and locations
- Map and markers
src/react/features/map/MapScene.tsx - Map weather overlay
src/react/features/map/MapWeatherOverlay.ts - Marker utilities
src/react/features/map/markerUtils.ts - Location index hook
src/react/hooks/useLocationIndex.ts - Location query worker
src/react/features/locations/locations.worker.ts - Location index
src/public/data/locations-index.json - Location records
src/data/locations
Weather data
- Weather API client
src/react/services/weatherApi.ts - Weather mappings
src/react/services/weatherMappings.ts - Abortable fetch hook
src/react/hooks/useAbortableFetch.ts
Settings and state
- Settings and formatting
src/react/app/settings.ts - Local storage wrapper
src/react/app/storage.ts - Response cache
src/react/services/cacheManager.ts
Other components
- Map user
- Open-Meteo
- Browser local storage
Connections 30
- Map user → App coordinator: uses app
- App coordinator → Map and markers: renders map
- App coordinator → Location search: renders search
- App coordinator → Settings dialog: renders settings
- App coordinator → Weather details: renders details
- Location search → Weather API client: searches places
- Location search → App coordinator: selects place
- App coordinator → Map and markers: focuses map
- Map and markers → Location index hook: queries locations
- Location index hook → Location query worker: posts queries
- Location query worker → Location index: fetches index
- Location records → Location index: indexed records
- Location query worker → Location index hook: returns matches
- Map and markers → Weather API client: requests marker weather
- Map and markers → Marker utilities: builds markers
- Map and markers → Map weather overlay: updates overlay
- Map and markers → Weather details: opens details
- Weather API client → Open-Meteo: fetches conditions
- Weather details → Weather API client: fetches air quality
- Weather details → Weather API client: fetches marine data
- Weather details → Weather mappings: maps conditions
- Weather details → Forecast charts: renders forecasts
- Weather details → Weather animation: animates conditions
- Weather details → Abortable fetch hook: loads optional data
- Settings dialog → App coordinator: saves changes
- App coordinator → Settings and formatting: loads and saves
- Settings and formatting → Local storage wrapper: persists preferences
- Settings and formatting → Browser local storage: reads and writes
- Response cache → Local storage wrapper: persists responses
- Local storage wrapper → Browser local storage: reads and writes