HTMLOverlay (Uber react-map-gl) - Used to display HTML including svgs from react and place them on the map

HTMLOverlayExample.js

// It's hard to find good examples of overlay usage for react's wrapper for mapbox gl. this little snippet is a component
// that will display points on a map and allow the parent to render HTML. The positioning has to be absolute for the
// projection to render the images in the right spot on the map (Adjust for image height/width centering). - Sony

import React, {PureComponent} from 'react';
import {HTMLOverlay} from 'react-map-gl';

const ICON_HEIGHT = 32;
const ICON_WIDTH = 32;
const iconUrl = 'https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg';

// Usage: <MapGL ...><HTMLOverlayComponent locations={arrayOfCoords} /></MapGL>
export default class HTMLOverlayExample extends PureComponent {
  redraw = ({width, height, project}) => {
    const {locations} = this.props;

    if (locations) {
      return locations.map((loc, index) => {
        const position = project([loc.longitude, loc.latitude]);

        return (
          <div key={index} style={{position: 'absolute', left: position[0] - ICON_WIDTH/2, top: position[1] - ICON_HEIGHT/2}}>
            <img src={iconUrl} height={ICON_HEIGHT} width={ICON_WIDTH}/>
          </div>
        );
      })
    }
  };

  render = () => <HTMLOverlay captureDrag={true} redraw={this.redraw}/>
}