HtmlOverlayItem

This is an HTML item that will be rendered inside HtmlOverlay or HtmlClusterOverlay.

Note: HtmlOverlayItem must be direct children of HtmlOverlay or HtmlClusterOverlay.

return (
  <HtmlOverlayItem
    style={{
      transform: 'translate(-50%,-50%)',
      pointerEvents: 'all'
    }}
    coordinates={coordinates}
    key={key}
  >
    YOUR CONTENT HERE.
  </HtmlOverlayItem>
);

Props

coordinates

Array of two (or three if you want to specify elevation) numbers where this will be displayed.

Best practices

Anchor point

By default the top-left corner will align with the provided coordinates. You can use CSS to change the anchor point. For example use transform: 'translate(-50%,-50%)' to center.

Mouse events

By default this will not receive any mouse events. Use pointerEvents: 'all' to receive events.

Key property

Because this is used inside an array of react components you need to provide a unique key. See the React docs