Reference

All components you can use and combine to build your map.

<Map>
  {/* Markers */}
  <MapMarker coordinates={[lng, lat]}>
    <MarkerContent>
      <MarkerLabel />
      <MarkerAvatar src="..." />
      <MarkerAvatarPin src="..." />
    </MarkerContent>
    <MarkerPopup />
    <MarkerTooltip />
  </MapMarker>
  <MapMarkerAnimated id="animated" path={[[lng, lat], ...]} />

  {/* Popup */}
  <MapPopup coordinates={[lng, lat]} />

  {/* Controls */}
  <MapControls position="bottom-right">
    <MapZoom />
    <MapOrientation />
    <MapGeolocate />
    <MapFullscreen />
  </MapControls>
  <MapCompass />

  {/* Features */}
  <MapMiniMap />
  <MapLine coordinates={[[lng, lat], ...]} />
  <MapPolygon coordinates={[[lng, lat], ...]} />
  <MapCircle center={[lng, lat]} radius={1000} />
  <MapAnimatedCircle id="zone" center={[lng, lat]} radius={1000} />
  <MapLineAnimated id="route" path={[[lng, lat], ...]} />
  <MapLineRadial id="radial" origin={[lng, lat]} destinations={[[lng, lat], ...]} />
  <MapArcAnimated id="arc" origin={[lng, lat]} destination={[lng, lat]} />
  <MapCameraFollow path={[[lng, lat], ...]} />
  <MapAnimatedPolygon id="zone" coordinates={[[lng, lat], ...]} />
  <MapCircleCluster data={geoJsonData} />
  <MapChoropleth data={geoJsonData} valueProperty="density" colorScale={colorScale} />
  <MapAnimatedPulse id="pulse" size={100} coordinates={[lng, lat]} />
  <MapImage id="overlay" url="..." coordinates={[...]} />
  <MapRasterVideo id="video" urls={[...]} coordinates={[...]} />
  <MapBlurArea coordinates={[[lng, lat], ...]} />
  <MapTargetingReticle coordinates={[lng, lat]} />
  <MapRain />
  <MapSnow />
  <MapSandstorm />

  {/* Effects */}
  <MapFire id="fire" coordinates={[lng, lat]} />
  <MapExplosion id="explosion" coordinates={[lng, lat]} />
  <MapCyclone id="cyclone" coordinates={[lng, lat]} />
  <MapMeteor id="meteor" target={[lng, lat]} />
  <MapLightning id="lightning" coordinates={[lng, lat]} />
  <MapSteam id="steam" coordinates={[lng, lat]} />
  <MapTsunami id="tsunami" origin={[lng, lat]} target={[lng, lat]} />

  {/* Overlays */}
  <MapMusicDisc coordinates={[lng, lat]} />
  <MapAnimatedFootprint path={[[lng, lat], ...]} />
  <MapGrid />
  <MapRadar id="radar" coordinates={[lng, lat]} />
  <MapWatermark>TEXT</MapWatermark>
</Map>

The root container that initializes the map and provides context to all child components. Supports both Mapbox GL JS and MapLibre GL JS. Automatically handles theme switching between light and dark modes.

Extends MapOptions from Mapbox GL (excluding container and style).

Container for map control components. Accepts composable control components as children (MapZoom, MapOrientation, MapGeolocate, MapFullscreen). Must be used inside Map.

Zoom in and zoom out control buttons. Must be used inside MapControls.

No props required.

Compass control that shows map orientation and resets bearing to north when clicked. Must be used inside MapControls.

No props required.

Geolocate control to find and fly to user's current location. Must be used inside MapControls.

Fullscreen toggle control. Must be used inside MapControls.

No props required.

Interactive compass with drag-to-rotate functionality. Dragging the compass rotates the map bearing. Must be used inside Map.

A container for marker-related components. Provides context for its children and handles marker positioning.

Extends MarkerOptions from Mapbox GL (excluding element).

Renders the visual content of a marker. Must be used inside MapMarker. If no children provided, renders a default blue dot marker.

Renders a popup attached to the marker that opens on click. Must be used inside MapMarker.

Extends PopupOptions from Mapbox GL (excluding className and closeButton).

Renders a tooltip that appears on hover. Must be used inside MapMarker.

Extends PopupOptions from Mapbox GL (excluding className, closeButton, and closeOnClick as tooltips auto-dismiss on hover out).

Renders a text label above or below the marker. Must be used inside MarkerContent.

A standalone popup component that can be placed anywhere on the map without a marker. Must be used inside Map.

Extends PopupOptions from Mapbox GL (excluding className and closeButton).

Renders an animated marker that moves along a path. Must be used inside Map.

Renders a line on the map connecting coordinate points. Must be used inside Map.

Renders a filled polygon on the map. Must be used inside Map.

Renders a geographic circle on the map with a center point and radius in meters. Must be used inside Map.

Renders an animated circle with drawing outline and fill effects. Must be used inside Map.

Renders clustered point data using Mapbox GL's native clustering. Automatically groups nearby points into clusters that expand on click. Must be used inside Map. Supports a generic type parameter for typed feature properties: MapCircleCluster<MyProperties>.

Colors geographic regions based on data values. Supports GeoJSON data with Polygon or MultiPolygon features. Must be used inside Map. Supports a generic type parameter for typed feature properties: MapChoropleth<MyProperties>.

Renders an animated pulsing dot at specified coordinates. Must be used inside Map.

Renders an animated polygon with drawing outline and fill effects. Must be used inside Map.

Displays an overview minimap showing the current viewport context. Must be used inside Map.

Renders blur effect overlays on specified areas of the map. Supports single or multiple areas. Must be used inside Map.

Renders a targeting reticle overlay with corner brackets that can track and lock onto targets. Must be used inside Map.

Renders an animated line that draws progressively along the route. Must be used inside Map.

Renders animated curved lines spreading from a central origin to multiple destinations. Must be used inside Map.

Renders an animated curved arc between two points. Useful for visualizing flights, deliveries, and point-to-point connections. Must be used inside Map.

Animates the camera along a path of coordinates for immersive fly-through experiences. Must be used inside Map.

Displays two maps side-by-side for visual comparison. This component creates its own map instances and does not require a parent Map component.

Displays 2 or 4 synchronized maps where panning, zooming, or rotating one map updates all others in real-time. This component creates its own map instances and does not require a parent Map component.

Overlays an image on the map at specified coordinates. Must be used inside Map.

Overlays video content on the map at specified coordinates. Must be used inside Map.

Adds an animated rain weather effect overlay to the map. Requires Mapbox GL JS v3.9 or higher. Must be used inside Map.

Adds an animated snowfall weather effect overlay to the map. Must be used inside Map.

Adds an atmospheric sandstorm effect with horizontal particle movement and reduced visibility. Must be used inside Map.

Renders a realistic animated fire effect with particle simulation at map coordinates. Must be used inside Map. Use useFireControl hook to control programmatically.

Renders an animated explosion burst effect with radial particles and flash. Supports burst and nuclear types. Must be used inside Map. Use useExplosionControl hook to trigger programmatically.

Renders an animated cyclone funnel with swirling particles and debris. Supports movement along a path. Must be used inside Map. Use useCycloneControl hook to control programmatically.

Renders animated meteors falling from sky with fiery trail and impact effect. Supports single or shower mode. Must be used inside Map. Use useMeteorControl hook to control programmatically.

Renders animated lightning bolt strikes with branching and flash effects. Must be used inside Map. Use useLightningControl hook to trigger strikes programmatically.

Renders a rising steam effect with wispy particle animation. Must be used inside Map. Use useSteamControl hook to control programmatically.

Renders an animated tsunami wave effect with incoming wave, crashing foam, and debris. Must be used inside Map. Use useTsunamiControl hook to control programmatically.

Renders a rotating vinyl disc with floating music notes at map coordinates. Must be used inside Map.

Renders animated footprint steps that walk along a path on the map. Must be used inside Map.

Renders a coordinate grid overlay with latitude/longitude lines and labels. Must be used inside Map.

Renders an animated radar sweep signal overlay at map coordinates. Must be used inside Map.

Renders a text watermark overlay on the map with configurable position. Must be used inside Map.

Renders an avatar image with optional status indicator. Must be used inside MarkerContent.

Renders an avatar inside a teardrop/pin shape that points to the exact location. Must be used inside MarkerContent.