Project Overview
This interactive web application helps users discover pickleball court locations in the Portland area. It provides a dynamic visualization of court data and offers various filtering options to enhance your search.
Key Features
- Interactive Map Display: Visualizes pickleball courts on a dynamic MapLibre map.
- Geolocation: Allows users to find courts near their current location.
- Advanced Filtering: Filter courts by distance, type (Indoor, Outdoor, Any), and minimum number of courts.
- Dynamic Sidebar: Lists courts based on the current map view and active filters, displaying detailed information for a selected court.
- "Get Directions": Provides a link to Google Maps for directions to the selected court.
- Dynamic Map Marker Styling: Map markers are styled based on size (number of courts) and color (court type).
- Custom UI Controls: Includes custom-styled dropdowns and visual filters.
- Responsive Design: Adapts to different screen sizes.
Technology Stack
- Mapping Library: MapLibre GL JS
- Basemap: OpenStreetMap
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Data Format: GeoJSON