I combined OpenStreetMap data for national parks and national forests with fire risk zones to show which major conservation lands face the highest wildfire threat. The map runs a spatial overlay analysis in your browser to identify which parks and forests overlap with extreme or high fire risk zones.
Data Sources
I queried 65,000+ protected areas from OpenStreetMap using the Overpass API, then filtered down to just national parks and national forests managed by the National Park Service and U.S. Forest Service. This gave me 1,073 high-value protected areas that intersect with fire risk zones in the western US.
Fire risk zones are simplified regional polygons I created based on known fire-prone areas. Each zone has a risk level (low, medium, high, extreme) based on historical fire frequency, vegetation type, and climate conditions.
Performance Optimization
I had to narrow the dataset significantly for performance. Leaflet (the mapping library I switched to) struggled with 20,000+ protected areas, causing slow loading and laggy interactions. By filtering to just national parks and forests, I cut the dataset by 95% while keeping the most important conservation lands. I also enabled canvas rendering instead of SVG for smoother pan and zoom.
Protected areas only appear when you zoom in to level 7 or higher. This prevents polygon clipping issues at wide zoom levels and keeps initial load times fast.
Why OpenStreetMap and Leaflet
I switched from Mapbox to pure OSM and Leaflet for this map. OSM is the largest collaborative mapping project in the world with free, open data constantly updated by volunteers. Leaflet is lighter weight than Mapbox GL JS and works well with moderate-sized datasets (under 5,000 features). The tradeoff is slower performance compared to WebGL-based libraries, which is why I had to optimize aggressively.
AI Integration
The AI chat panel (powered by Claude 3.5 Haiku) can answer questions about specific protected areas, fire risk patterns, and OpenStreetMap data quality. Rate limited to 10 queries per IP per day to keep API costs reasonable.
Technical Stack
Overpass API for querying OSM protected areas
Leaflet with canvas rendering for map display
OpenStreetMap tile servers for basemaps (Standard, Humanitarian, Topographic, Light, Dark)
Claude 3.5 Haiku for AI-powered analysis
Astro for the static site framework
Shapely (Python) for server-side spatial filtering