react-map-gl/docs/overlays/custom-overlays.md

Custom Overlays

Because overlays are regular React components, it's straightforward to create resuable overlays that others can include into their project. Overlays can access the current viewport through the React context:

import React from 'react';
import PropTypes from 'prop-types';
import {BaseControl} from 'react-map-gl';

class MyCustomOverlay extends BaseControl {
  render() {
    const {viewport} = this.context;
    // draw something
    // _onContainerLoad registers event listeners for map interactions
    return <div ref={this._onContainerLoad} />;
  }
}

Here's an example of using the ScatterplotOverlay:

<MapGL {...viewport} mapStyle={mapStyle}>
    <ScatterplotOverlay
      locations={this.state.locations}
      dotRadius={1}
      globalOpacity={0.8}
      compositeOperation="lighter"
      dotFill="blue"
      renderWhileDragging={true}
    />
</MapGL>

There are more examples in the examples/additional-overlays folder of this repo.