HtmlOverlay

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} />
  <HtmlOverlay>
    <HtmlOverlayItem coordinates={coordinates}>{title}</HtmlOverlayItem>
  </HtmlOverlay>
</DeckGL>

Or if you prefer to subclass:

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

Properties

zIndex

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

Methods to override

getItems()

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