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


Use this class if you have HTML items that need to be displayed at specific geo coordinates on the map. If you need clustering see HtmlClusterOverlay. You can subclass this class or provide HtmlOverlayItem as children. Then use it as a react component inside DeckGL.

<DeckGL initialViewState={initialViewState} controller={true}>
  <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
    <HtmlOverlayItem coordinates={coordinates}>{title}</HtmlOverlayItem>

Or if you prefer to subclass:

class YourClassName extends HtmlOverlay {
  getItems() {
    return [
        style={{ ...your style here... }}
        key={ ... unique key... }
        coordinates={[-122.41914, 37.77919]}
        You can have text and children like <div>...</div>



Default is 1. Set to 0 to move items under layer.

Methods to override


Provide an array of HtmlOverlayItem if not providing them as JSX children.