🗺️ Phase 7: MapLibre Integration - Interactive Heritage Maps

[kurosh87]

TODO

Map Components:

• /components/maps/map-provider.tsx - MapLibre context provider
• /components/maps/trip-map.tsx - Full trip map with all days
• /components/maps/circuit-map.tsx - Circuit route visualization
• /components/maps/explore-map.tsx - Site discovery map
• /components/maps/map-markers.tsx - Custom marker components
• /components/maps/map-polylines.tsx - Route lines between stops
• /components/maps/map-controls.tsx - Zoom, layers, filters

Map Layers:

• UNESCO sites layer with custom markers
• POIs layer (clustered)
• Circuit routes as polylines
• Trip itinerary layer
• Day-specific markers

Interactive Features:

• Click markers to show popup with site info
• Hover effects on markers
• Route visualization between stops
• Measure distance tool
• Draw custom routes
• Add markers by clicking map

Configuration:

• Custom heritage map style (muted modern, enhanced historical)
• Multiple base layers (light, dark, satellite, terrain)
• Bounds restrictions for regions
• Responsive zoom levels

Package:

• Install maplibre-gl
• Configure map styles
• Set up tile sources

References:

• FUNCTIONALITY_SPEC.md section 3 for map architecture
• MapLibre GL JS documentation
• Existing project uses (if any)