API Reference

Complete reference for all map components and their props.

Note: This library is built on top of MapLibre GL JS. Most components extend the native MapLibre options. Refer to the MapLibre Map API for additional options not listed here.

Component Anatomy

All parts of the component that you can use and combine to build your map.

<Map>
  <MapMarker longitude={...} latitude={...}>
    <MarkerContent>
      <MarkerLabel />
    </MarkerContent>
    <MarkerPopup />
    <MarkerTooltip />
  </MapMarker>

  <MapPopup longitude={...} latitude={...} />
  <MapControls />
  <MapRoute coordinates={...} />
  <MapClusterLayer data={...} />
</Map>

Map

The root container component that initializes MapLibre GL and provides context to child components. Automatically handles theme switching between light and dark modes.

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

PropTypeDefaultDescription
childrenReactNodeChild components (markers, popups, controls, routes).
styles{ light?: string | StyleSpecification; dark?: string | StyleSpecification }Custom map styles for light and dark themes. Overrides the default Carto base map tiles.
projectionProjectionSpecificationMap projection type. Use { type: "globe" } for 3D globe view.

useMap

A hook that provides access to the MapLibre map instance and loading state. Must be used within a Map component.

const { map, isLoaded } = useMap();

Returns map (MapLibre.Map) and isLoaded (boolean) tells you if the map is loaded and ready to use.

MapControls

Renders map control buttons (zoom, compass, locate, fullscreen). Must be used inside Map.

PropTypeDefaultDescription
position"top-left" | "top-right" | "bottom-left" | "bottom-right""bottom-right"Position of the controls on the map.
showZoombooleantrueShow zoom in/out buttons.
showCompassbooleanfalseShow compass button to reset bearing.
showLocatebooleanfalseShow locate button to find user's location.
showFullscreenbooleanfalseShow fullscreen toggle button.
classNamestringAdditional CSS classes for the controls container.
onLocate(coords: { longitude: number; latitude: number }) => voidCallback with user coordinates when located.

MapMarker

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

Extends MarkerOptions from MapLibre GL (excluding element).

PropTypeDefaultDescription
longitudenumberLongitude coordinate for marker position.
latitudenumberLatitude coordinate for marker position.
childrenReactNodeMarker subcomponents (MarkerContent, MarkerPopup, etc).
onClick(e: MouseEvent) => voidCallback when marker is clicked.
onMouseEnter(e: MouseEvent) => voidCallback when mouse enters marker.
onMouseLeave(e: MouseEvent) => voidCallback when mouse leaves marker.
onDragStart(lngLat: {lng, lat}) => voidCallback when marker drag starts (requires draggable: true).
onDrag(lngLat: {lng, lat}) => voidCallback during marker drag (requires draggable: true).
onDragEnd(lngLat: {lng, lat}) => voidCallback when marker drag ends (requires draggable: true).

MarkerContent

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

PropTypeDefaultDescription
childrenReactNodeCustom marker content. Defaults to a blue dot.
classNamestringAdditional CSS classes for the marker container.

MarkerPopup

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

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

The className and closeButton from MapLibre's PopupOptions are excluded to prevent style conflicts. Use the component's own props to style the popup. MapLibre's default popup styles are reset via CSS.
PropTypeDefaultDescription
childrenReactNodePopup content.
classNamestringAdditional CSS classes for the popup container.
closeButtonbooleanfalseShow a close button in the popup.

MarkerTooltip

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

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

The className from MapLibre's PopupOptions is excluded to prevent style conflicts. Use the component's own className prop to style the tooltip content. MapLibre's default popup styles are reset via CSS.
PropTypeDefaultDescription
childrenReactNodeTooltip content.
classNamestringAdditional CSS classes for the tooltip container.

MarkerLabel

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

PropTypeDefaultDescription
childrenReactNodeLabel text content.
classNamestringAdditional CSS classes for the label.
position"top" | "bottom""top"Position of the label relative to the marker.

MapPopup

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

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

The className and closeButton from MapLibre's PopupOptions are excluded to prevent style conflicts. Use the component's own props to style the popup. MapLibre's default popup styles are reset via CSS.
PropTypeDefaultDescription
longitudenumberLongitude coordinate for popup position.
latitudenumberLatitude coordinate for popup position.
onClose() => voidCallback when popup is closed.
childrenReactNodePopup content.
classNamestringAdditional CSS classes for the popup container.
closeButtonbooleanfalseShow a close button in the popup.

MapRoute

Renders a line/route on the map connecting coordinate points. Must be used inside Map. Supports click and hover interactions for building route selection UIs.

PropTypeDefaultDescription
idstringundefined (auto-generated)Optional unique identifier for the route layer. Auto-generated if not provided.
coordinates[number, number][]Array of [longitude, latitude] coordinate pairs.
colorstring"#4285F4"Line color (CSS color value).
widthnumber3Line width in pixels.
opacitynumber0.8Line opacity (0 to 1).
dashArray[number, number]Dash pattern [dash length, gap length] for dashed lines.
onClick() => voidCallback when the route line is clicked.
onMouseEnter() => voidCallback when mouse enters the route line.
onMouseLeave() => voidCallback when mouse leaves the route line.
interactivebooleantrueWhether the route is interactive (shows pointer cursor on hover).

MapClusterLayer

Renders clustered point data using MapLibre 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: MapClusterLayer<MyProperties>.

PropTypeDefaultDescription
datastring | GeoJSON.FeatureCollectionGeoJSON FeatureCollection data or URL to fetch GeoJSON from.
clusterMaxZoomnumber14Maximum zoom level to cluster points on.
clusterRadiusnumber50Radius of each cluster when clustering points (in pixels).
clusterColors[string, string, string]["#51bbd6", "#f1f075", "#f28cb1"]Colors for cluster circles: [small, medium, large] based on point count.
clusterThresholds[number, number][100, 750]Point count thresholds for color/size steps: [medium, large].
pointColorstring"#3b82f6"Color for unclustered individual points.
onPointClick(feature: GeoJSON.Feature, coordinates: [number, number]) => voidCallback when an unclustered point is clicked.
onClusterClick(clusterId: number, coordinates: [number, number], pointCount: number) => voidCallback when a cluster is clicked. If not provided, zooms into the cluster.