Skip to main content
Back to Portfolio

Portfolio Demo

Parks & Facilities Interactive Map

An interactive map and directory for exploring public parks, recreation centers, and community facilities across six South Bay cities. Filter by city, type, amenities, and accessibility.

React TypeScript Leaflet OpenStreetMap Tailwind CSS WCAG 2.1 AA
13
Locations
182
Total Acres
2
Facilities
13
ADA Accessible
Loading map…

Parks & Facilities(13)

Data sourced from OpenStreetMap, city websites, and Santa Clara County open data

The problem

Most city parks pages are either broken links to PDF lists or a Google Maps embed with a single pin for City Hall. A resident looking for a park with a dog run, accessible parking, and a picnic area can't filter; they have to open each park page individually, read sparse descriptions, and give up. The information exists; the interface fails them.

The approach

Built with React Leaflet and OpenStreetMap tiles: no proprietary APIs, no Mapbox costs, no vendor lock-in. Markers are color-coded by park type with popup previews. Filters stack: type, amenities, and accessibility can all be applied at once. Data is sourced from municipal open data APIs and GIS exports. The map auto-pans to the selected city on load.

Why it matters

This pattern applies to any public facility inventory: libraries, recreation centers, community gardens, public restrooms. Once built, the core component is reusable across departments. For parks specifically, a single accessibility filter can meaningfully change who can use city services: a resident with mobility limitations searching for a wheelchair-accessible trail shouldn't have to call the parks department to find out if one exists.