Mapbox

A component that integrates Mapbox GL JS for interactive maps with customizable markers, popups, and styles.

Basic Map

Map with Markers and Popups

Map Styles

Interactive Map Features

This map demonstrates pitch and bearing settings for a 3D-like view of Sydney.

Click-to-Add Marker

Click anywhere on the map to add a marker. The marker will be removed when you click elsewhere. Location details (country, state, city) will be displayed in an alert.

Real-time Location Tracking

This example demonstrates real-time marker updates with animation. The markers simulate moving vehicles with custom icons. You can start/stop the simulation with the buttons above. In a real application, this could be used for tracking delivery vehicles, ride-sharing services, or other moving objects.

Component API Reference

Props
  • accessToken: string - Your Mapbox access token
  • style?: string - Map style URL (default: 'mapbox://styles/mapbox/streets-v12')
  • center?: [number, number] - Initial map center coordinates [longitude, latitude] (default: [0, 0])
  • zoom?: number - Initial zoom level (default: 9)
  • minZoom?: number - Minimum zoom level
  • maxZoom?: number - Maximum zoom level
  • bearing?: number - Map rotation in degrees (default: 0)
  • pitch?: number - Map tilt in degrees (default: 0)
  • interactive?: boolean - Whether the map can be interacted with (default: true)
  • attributionControl?: boolean - Whether to show attribution control (default: true)
  • markers?: Array - Array of marker objects with the following properties:
    • lngLat: [number, number] - Longitude and latitude coordinates
    • color?: string - Marker color (hex code)
    • popup?: object - Popup configuration with these properties:
      • content: string - HTML content for the popup
      • closeButton?: boolean - Whether to show a close button
      • closeIcon?: string - Icon name for the close button (uses Icons component)
      • className?: string - Additional CSS class for styling the popup
  • onLocationClick?: Function - Callback function when map is clicked, returns location data
  • enableRealTimeUpdates?: boolean - Enable real-time marker updates and draggable markers (default: false)
  • animateMarkerMovement?: boolean - Animate marker movement when position is updated (default: true)
  • animationDuration?: number - Duration of marker movement animation in milliseconds (default: 500)
  • onMarkerUpdate?: Function - Callback function when marker position is updated, receives markerId and newPosition
  • class?: string - Additional CSS classes

Note: Replace YOUR_MAPBOX_ACCESS_TOKEN with your actual Mapbox access token to make the maps work.