Polygon Climate Visualizer | Interactive Polygon Temperature Visualizer
A powerful visualization tool that overlays weather data on user-defined geographic polygons.
ClimateScope enables users to draw polygons on an interactive map and visualize weather data such as temperature over selected date ranges. Built with Next.js, Leaflet, and Tailwind CSS, the app fetches data from Open-Meteo APIs and colorizes polygons based on dynamic temperature thresholds. With features like real-time API caching, time-based data navigation, and a responsive UI, it serves as an insightful tool for climate analysis and educational use.
Tech Stack
Next.jsReactTypeScriptTailwind CSSLeafletOpen-Meteo API
Features
- Draw custom polygons on an interactive map.
- Fetch weather data (temperature) from Open-Meteo APIs for polygon centroids.
- Apply color-coding rules based on temperature thresholds.
- Navigate through time using a smooth timeline slider.
- Live updates on polygon colors as date or rules change.
- Smart caching to prevent redundant API calls.
Challenges
- Accurately computing polygon centroids to fetch representative weather data.
- Avoiding excessive API calls with debounce logic and caching.
- Dynamically applying color thresholds to polygons in real-time.
- Managing interactive map states and re-renders effectively.
- Implementing a responsive UI while dealing with complex map interactions.
Learnings
- Deepened understanding of geospatial rendering using Leaflet.
- Mastered performance optimization with debouncing and `useRef` based caching.
- Enhanced skills in TypeScript typing and reusable UI components.
- Explored browser-side performance patterns for dynamic rendering and state management.
- Built a user-friendly interface with advanced interactivity on map layers.
Feedback
For feedback or suggestions, contact me at: ajaykommana123@gmail.com