Customizing Map Presentation
Relevant source files
The following files were used as context for generating this wiki page:
The map presentation system in the P4N Map project is designed to provide a highly performant, visual-first interface for planning van trips. By utilizing GPU-rendered pins and GeoJSON sources instead of standard DOM markers, the system ensures that thousands of potential overnight spots and amenities can be displayed without lag or positional drift during map interactions.
Sources: src/components/MapView.tsx:1-12
Core Mapping Architecture
The mapping engine is built on MapLibre GL, using a custom OpenStreetMap style. Data is fed into the map via GeoJSON FeatureCollections, which are updated through "cheap" setData calls. This architecture separates the data management (handled in Planner.tsx) from the rendering logic (handled in MapView.tsx).
The following diagram illustrates the data flow from application state to the map visual layers:
The system uses specific source and layer IDs to organize data types on the map:
| Source ID | Layer Type | Purpose |
|---|---|---|
p4n-places | Symbol | Park4Night overnight spots (pins) |
p4n-dots | Circle | OSM Amenities and dog park indicators |
p4n-dogstops | Symbol | Interactive dog park waypoints |
p4n-stops | Symbol | User-defined trip waypoints (A, B, C...) |
route | Line | The primary trip polyline and corridor glow |
band | Line | The "look-ahead" highlight band |
Sources: src/components/MapView.tsx:47-80, src/components/MapView.tsx:550-580
Dynamic Pin Generation
Pins are not static images but are generated dynamically on a canvas at 2x scale to ensure crispness on high-DPI displays. The drawPin function creates teardrop icons with various color and iconography modifiers based on the place's nature and selection status.
Pin Categories and States
- Categories: Pins are categorized as
nightOk,nightNo, ortrucker. - Nature Modifier: If a place is "in nature," a green park icon is overlaid on the pin.
- Selection State: Selected pins are rendered larger with a white stroke and a higher
symbol-sort-keyto appear above neighboring pins.
Route and Corridor Visualization
The map visualizes the trip route using two primary components: the actual route line and a "corridor hint."
The Corridor Band
The corridor is a wide, blurred line rendered beneath the route. Its width is dynamically calculated based on the corridorKm setting. The system uses an exponential interpolation based on zoom level to ensure the visual width accurately reflects real-world distance (meters per pixel).
- Diameter: The total band width covers
corridorKm * 2. - Interpolation: 1 corridor-km is approximately
2^Z / 110.7pixels, whereZis the zoom level.
Look-Ahead Hunt Band
The band source highlights a specific slice of the route (the "window"). This is used for "Drive for X hours, then hunt" or "On the road" modes, focusing the user's attention on specific segments of the trip.
Sources: src/components/MapView.tsx:585-645, src/lib/planner.ts:80-95
Interaction and Information Overlays
The map presentation includes interactive elements that provide context without cluttering the main view.
Hover Tooltips
MapLibre hit-testing is used on mousemove to display a custom HTML popup. The tooltip provides:
- Title and Meta: Place name, rating, and city.
- Trip Context: Detour distance (km off road) and progress distance (km along trip).
- Hints: Interaction prompts like "Click to add to trip."
Detail Panel
When a pin is selected, a side panel (on desktop) or bottom sheet (on mobile) expands to show comprehensive place data, including user reviews, full descriptions, and amenity lists normalized from Park4Night data.
User Customization via Settings
Users can customize the map's visual density and focus through the Settings and Specs controls:
- Minimum Rating: Filters out pins that do not meet the user's quality threshold.
- Service Highlights: Required services (water, electric, etc.) do not hide pins but add a specific badge to the place's row in the list and can be used to rank matches higher.
- Van Profile: Navigation links from the map to external apps (TomTom/Google) include the van's height and length to ensure routing honors vehicle constraints.
Sources: src/app/settings/page.tsx:185-240, src/components/SpecsControls.tsx:60-120, src/lib/planner.ts:135-155
The customization of map presentation ensures that the user interface remains responsive while providing high-density, context-aware information for van life trip planning. By combining GPU rendering with dynamic visual feedback (corridors, look-ahead bands, and custom pins), the project facilitates efficient route evaluation.