Portfolio Demo · Public spaces
Parks & Facilities Interactive Map
An interactive map and directory for exploring public parks, recreation centers, and community facilities across eleven South Bay cities. Filter by city, type, amenities, and accessibility.
- React
- TypeScript
- Leaflet
- OpenStreetMap
- Tailwind CSS
- WCAG 2.1 AA
Interactive demo
Filters
Parks & Facilities(13)
Data sourced from OpenStreetMap, city websites, and Santa Clara County open data
Case study overview
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 searching for a wheelchair-accessible trail shouldn't have to call the parks department to find out if one exists.
Have something similar in mind?
Need a civic tool with this shape?
Stoa designs and ships resident-facing tools, internal workflows, and public service interfaces that stay fast, legible, and accessible from day one.