react-map-gl/docs/advanced/custom-components.md

Custom Components

You may create your own map control components by consuming MapContext.

Using the MapContext

The following component renders a label "(longitude, latitude)" at the given coordinate:

import * as React from 'react';
import MapGL, {MapContext} from 'react-map-gl';

function CustomMarker(props) {
  const context = React.useContext(MapContext);
  
  const {longitude, latitude} = props;

  const [x, y] = context.viewport.project([longitude, latitude]);

  const markerStyle = {
    position: 'absolute',
    background: '#fff',
    left: x,
    top: y
  };

  return (
    <div style={markerStyle} >
      ({longitude}, {latitude})
    </div>
  );
}

function App() {
  return (
    <MapGL longitude={-122.45} latitude={37.78} zoom={12} mapboxApiAccessToken={MAPBOX_TOKEN}>
      <CustomeMarker longitude={-122.45} latitude={37.78} />
    </MapGL>
  )
}

Using the useMapControl hook

useMapControl is an experimental API that makes it easier to create controls with event handling.

import * as React from 'react';
import MapGL, {_useMapControl as useMapControl} from 'react-map-gl';

function CustomControl(props) {
  const [counter, setCounter] = React.useState(0);
  const {context, containerRef} = useMapControl({
    onDragStart: evt => {
      // prevent the base map from panning
      evt.stopPropagation();
    },
    onClick: evt => {
      if (evt.type === 'click') {
        setCounter(v => v + 1);
      }
    }
  });

  return (
    <div ref={containerRef} >
      Clicked {counter} times
    </div>
  );
}

function App() {
  return (
    <MapGL longitude={-122.45} latitude={37.78} zoom={12} mapboxApiAccessToken={MAPBOX_TOKEN}>
      <CustomControl />
    </MapGL>
  )
}

Calling useMapControl(opts) returns an object containing the following fields:

• context (MapContext) - the current context value
• containerRef (RefObject) - this should be assigned to the ref prop of the DOM element that the event listeners should attach to.

This hook supports the following options:

• onScroll (Function) - called on mouse wheel event. Can be used to stop map from zooming when this component is scrolled.
• onDragStart (Function) - called on dragstart event. Can be used to stop map from panning when this component is dragged.
• onClick (Function) - called on click event. Can be used to stop map from calling the onClick callback when this component is clicked.
• onDoubleClick (Function) - called on double click event. Can be used to stop map from zooming when this component is double clicked.
• onPointerMove (Function) - called on pointermove event. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.