Nepal Weather Map 🌦️

An interactive weather map application for Nepal that visualizes real-time forecast data from DHM Nepal's GeoServer using OGC WMS (Web Map Service).

Features

✨ Interactive Map

• OpenStreetMap base layer centered on Nepal
• Smooth pan and zoom controls
• Responsive design for desktop and mobile

🌡️ Multiple Weather Layers

• Air Temperature - Surface air temperature forecast
• Rainfall - Total precipitation forecast
• Wind Speed - 10m wind speed forecast
• Relative Humidity - Relative humidity at 2m
• Surface Pressure - Mean sea level pressure

⏰ Time-Based Forecasts

• 72-hour forecast horizon
• 3-hour time steps
• Interactive time slider
• Playback controls for animation
• Real-time timestamp display

🎨 Customization

• Adjustable layer opacity (0-100%)
• Transparent WMS overlays
• Layer switching with instant updates
• Clean, modern UI with shadcn/ui components

Technology Stack

• Framework: Next.js 16 (App Router)
• Mapping: Leaflet + React Leaflet
• UI Components: shadcn/ui + Radix UI
• Styling: Tailwind CSS v4
• Language: TypeScript
• Data Source: DHM Nepal GeoServer WMS

Getting Started

Installation

npm install

Development

npm run dev

Open http://localhost:3000 to view the application.

Build

npm run build
npm start

WMS Configuration

The application connects to DHM Nepal's GeoServer:

• Base URL: https://dhm.gov.np/mfd/geoserver/wms/NWP
• Version: 1.1.1
• Format: image/png (transparent)
• Projection: EPSG:3857 (Web Mercator)

Available Layers

• NWP:gidc_wrf_air_temperature
• NWP:gidc_wrf_total_precipitation
• NWP:gidc_wrf_wind_speed
• NWP:gidc_wrf_relative_humidity
• NWP:gidc_wrf_surface_pressure

Project Structure

├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main weather map page
│   └── globals.css         # Global styles + Leaflet CSS
├── components/
│   ├── weather-map.tsx     # Leaflet map with WMS layers
│   ├── layer-selector.tsx  # Weather layer switcher
│   ├── time-control.tsx    # Time slider and playback controls
│   └── map-legend.tsx      # Layer information display
└── lib/
    └── weather-layers.ts   # Layer configuration and WMS settings

Key Components

WeatherMap

Core Leaflet map component that renders:

• OpenStreetMap base tiles
• WMS weather overlay layers
• Dynamic BBOX calculation
• Zoom and pan handling

LayerSelector

UI for switching between different weather variables with icons and descriptions.

TimeControl

Interactive controls for:

• Forecast time selection (0-72 hours)
• Playback animation
• Layer opacity adjustment

MapLegend

Displays information about the currently selected weather layer.

WMS Integration

The application uses WMSTileLayer from react-leaflet, which automatically:

• Calculates proper BBOX for each tile
• Handles zoom levels and tile alignment
• Manages coordinate transformations
• Supports time-based layer rendering

Example WMS request generated:

https://dhm.gov.np/mfd/geoserver/wms/NWP?
  SERVICE=WMS&
  REQUEST=GetMap&
  VERSION=1.1.1&
  LAYERS=NWP:gidc_wrf_air_temperature&
  FORMAT=image/png&
  TRANSPARENT=true&
  WIDTH=256&
  HEIGHT=256&
  SRS=EPSG:3857&
  BBOX=<calculated>&
  TIME=2026-02-02T05:00:00.000Z

Future Enhancements

• Implement playback animation
• Add GetFeatureInfo for point data
• Display custom color scales/legends from WMS
• Add weather station markers
• Export map as image
• Add multiple time period comparisons
• Mobile-optimized controls
• Dark mode map tiles

Attribution

Weather data provided by the Department of Hydrology and Meteorology (DHM), Nepal.

License

MIT