react-map-gl/docs/components/marker.md

Marker Control

This is a React equivalent of Mapbox's Marker Control, which can be used to render custom icons at specific locations on the map.

import {Component} from 'react';
import ReactMapGL, {Marker} from 'react-map-gl';

class Map extends Component {
  render() {
    return (
      <ReactMapGL latitude={37.78} longitude={-122.41} zoom={8}>
        <Marker latitude={37.78} longitude={-122.41} offsetLeft={-20} offsetTop={-10}>
          <div>You are here</div>
        </Marker>
      </ReactMapGL>
    );
  }
}

Properties

latitude {Number} (required)

Latitude of the marker.

longitude {Number} (required)

Longitude of the marker.

offsetLeft {Number} - default: 0

Offset of the marker from the left in pixels, negative number indicates left.

offsetTop {Number} - default: 0

Offset of the marker from the top in pixels, negative number indicates up.

captureScroll {Boolean} - default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag {Boolean} - default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick {Boolean} - default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick {Boolean} - default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.