Chevron Down
Table of Contents
Chevron DownOverview
Chevron DownInteractive Examples
Chevron DownAPI Reference (Modes)
Chevron DownAPI Reference (Overlays)
Chevron DownAPI Reference (Map GL Draw)

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