Skip to main content

Marker

React component that wraps mapbox-gl's Marker class.

import * as React from 'react';
import Map, {Marker} from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';

function App() {
  return <Map
    mapboxAccessToken="<Mapbox access token>"
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    mapStyle="mapbox://styles/mapbox/streets-v9"
  >
    <Marker longitude={-100} latitude={40} anchor="bottom" >
      <img src="./pin.png" />
    </Marker>
  </Map>;
}

If Marker is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used.

Properties​

Reactive Properties​

draggable: boolean​

Default: false

If true, the marker is able to be dragged to a new position on the map.

latitude: number​

Required. The latitude of the anchor location.

longitude: number​

Required. The longitude of the anchor location.

offset: PointLike​

Default: null

The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up.

pitchAlignment: 'map' | 'viewport' | 'auto'​

Default: 'auto'

  • map aligns the Marker to the plane of the map.
  • viewport aligns the Marker to the plane of the viewport.
  • auto automatically matches the value of rotationAlignment.

An instance of the Popup class (Mapbox | Maplibre) to attach to this marker. If undefined or null, any popup set on this Marker instance is unset.

rotation: number​

Default: 0

The rotation angle of the marker in degrees, relative to its rotationAlignment setting. A positive value will rotate the marker clockwise.

rotationAlignment: 'map' | 'viewport' | 'auto'​

Default: 'auto'

  • map aligns the Marker's rotation relative to the map, maintaining a bearing as the map rotates.
  • viewport aligns the Marker's rotation relative to the viewport, agnostic to map rotations.
  • auto is equivalent to viewport.

style: CSSProperties​

CSS style override that applies to the marker's container.

Callbacks​

onClick: (evt: MapEvent) => void​

Called when the marker is clicked on.

onDragStart: (evt: MarkerDragEvent) => void​

Called when dragging starts, if draggable is true.

onDrag: (evt: MarkerDragEvent) => void​

Called while dragging, if draggable is true.

onDragEnd: (evt: MarkerDragEvent) => void​

Called when dragging ends, if draggable is true.

Other Properties​

The properties in this section are not reactive. They are only used when the component first mounts.

Any options supported by the Marker class (Mapbox | Maplibre), such as

  • anchor
  • color
  • scale
  • clickTolerance

Methods​

The underlying native Marker instance is accessible via a React ref hook. You may use it to call any imperative methods:

import * as React from 'react';
import {useRef, useMemo, useCallback} from 'react';
import Map, {Marker} from 'react-map-gl/mapbox';
import mapboxgl from 'mapbox-gl';

function App() {
  const markerRef = useRef<mapboxgl.Marker>();

  const popup = useMemo(() => {
    return mapboxgl.Popup().setText('Hello world!');
  }, [])

  const togglePopup = useCallback(() => {
    markerRef.current?.togglePopup();
  }, []);

  return <>
    <Map>
      <Marker longitude={-122.4} latitude={37.8} color="red" popup={popup} ref={markerRef} />
    </Map>
    <button onClick={togglePopup}>Toggle popup</button>
  </>;
}

Source​

marker.ts