Interactive Map Component

The InteractiveMap component provides a fully-featured map interface with markers, filters, and interactive features for displaying locations. Built with Leaflet and React Leaflet for cross-browser compatibility and performance.

Interactive Map with Filters

This map displays various location types in Florence, Italy. Use the filter badges above the map to show or hide specific marker types. Click on any marker to see detailed information.

Loading map...

Restaurants(2)

Attractions(2)

Hotels(1)

Free(1)

Budget(1)

Neighborhoods(1)

Active Filters

No filters active. Showing all markers.

Marker Counts

Restaurants: 2

Attractions: 2

Hotels: 1

Free: 1

Budget: 1

Neighborhoods: 1

Usage Example

import { InteractiveMap, type MapMarker, type MapFilter } from '@/components/composite/InteractiveMap';
import { MapPin, Utensils, Camera } from 'lucide-react';

const markers: MapMarker[] = [
  {
    id: '1',
    position: { lat: 43.7696, lng: 11.2558 },
    type: 'restaurant',
    title: 'Osteria Francescana',
    data: {
      description: 'Three Michelin stars. Modern Italian cuisine.',
      rating: '5.0',
      price: '€€€€',
      address: 'Via Stella 22, Modena',
    },
  },
  // ... more markers
];

const filters: MapFilter[] = [
  {
    key: 'restaurant',
    label: 'Restaurants',
    color: '#f59e0b',
    icon: Utensils,
  },
  {
    key: 'attraction',
    label: 'Attractions',
    color: '#ef4444',
    icon: Camera,
  },
];

<InteractiveMap
  center={{ lat: 43.7696, lng: 11.2558 }}
  zoom={14}
  markers={markers}
  filters={filters}
  activeFilters={activeFilters}
  onFilterChange={setActiveFilters}
  onMarkerClick={(marker) => {
    console.log('Clicked:', marker);
    // Navigate to detail page
  }}
  height="600px"
/>

Features

•Interactive map: Built with Leaflet for cross-browser compatibility
•Color-coded markers: Different colors for each marker type (attraction, restaurant, hotel, etc.)
•Filter controls: Show/hide marker types using filter badges
•Marker popups: Click markers to see detailed information in a card
•Legend: Visual legend showing marker types and counts
•Bounds fitting: Automatically fit map to show all markers
•Responsive: Adapts to different screen sizes and container widths
•Accessible: Full keyboard navigation, ARIA labels, and screen reader support
•Client-side rendering: Handles Next.js SSR properly with loading state

Props

center: { lat: number; lng: number }

Center coordinates for the map

zoom?: number

Initial zoom level (default: 13)

markers: MapMarker[]

Array of markers to display on the map

bounds?: { north: number; south: number; east: number; west: number }

Optional bounds to fit map view automatically

onMarkerClick?: (marker: MapMarker) => void

Callback when a marker is clicked

filters?: MapFilter[]

Optional filter configuration for marker types

activeFilters?: string[]

Currently active filter keys

onFilterChange?: (filters: string[]) => void

Callback when filters change

showControls?: boolean

Show filter controls and legend (default: true)

height?: string

Map height (default: '600px')

Marker Types

The component supports the following marker types, each with a default color:

'attraction' - Red (#ef4444)
'restaurant' - Amber (#f59e0b)
'hotel' - Blue (#3b82f6)
'neighborhood' - Purple (#8b5cf6)
'free' - Green (#10b981)
'budget' - Yellow (#fbbf24)

You can override the default color by providing a color property on individual markers.

Use Cases

•Neighborhood pages: Display neighborhoods with boundaries and key locations
•Free things to do: Show free attractions and activities on an interactive map
•Budget activities: Map of budget-friendly attractions and experiences
•Restaurant listings: Interactive map with restaurant pins and filtering
•Attraction detail pages: Location map showing how to get there

Usage Example

import { InteractiveMap, type MapMarker, type MapFilter } from '@/components/composite/InteractiveMap';
import { MapPin, Utensils, Camera } from 'lucide-react';

const markers: MapMarker[] = [
  {
    id: '1',
    position: { lat: 43.7696, lng: 11.2558 },
    type: 'restaurant',
    title: 'Osteria Francescana',
    data: {
      description: 'Three Michelin stars. Modern Italian cuisine.',
      rating: '5.0',
      price: '€€€€',
      address: 'Via Stella 22, Modena',
    },
  },
  // ... more markers
];

const filters: MapFilter[] = [
  {
    key: 'restaurant',
    label: 'Restaurants',
    color: '#f59e0b',
    icon: Utensils,
  },
  {
    key: 'attraction',
    label: 'Attractions',
    color: '#ef4444',
    icon: Camera,
  },
];

<InteractiveMap
  center={{ lat: 43.7696, lng: 11.2558 }}
  zoom={14}
  markers={markers}
  filters={filters}
  activeFilters={activeFilters}
  onFilterChange={setActiveFilters}
  onMarkerClick={(marker) => {
    console.log('Clicked:', marker);
    // Navigate to detail page
  }}
  height="600px"
/>