SDKs · React & Next.js

Step 5 — Taps & info windows

Respond to taps and show a popup above a marker.

Interactions

<UbHubMap
  style={{ height: 480 }}
  markers={markers}
  onMarkerTap={(marker) => console.log("tapped", marker.id, marker.data)}
  onPolylineTap={(line) => {}}
  onPolygonTap={(polygon) => {}}
  onCircleTap={(circle) => {}}
  onClick={(point) => console.log("basemap tap", point)}     // not fired over a marker/shape
  onLongPress={(point) => console.log("long press", point)}  // right-click or touch hold
  infoWindow={(marker) => <div style={{ padding: "6px 10px" }}>{marker.label}</div>}
/>;

onMarkerTap/onPolylineTap/onPolygonTap/onCircleTap give you the annotation and its data.
onClick fires only for basemap taps; onLongPress is a right-click or touch hold.
infoWindow renders a React popup above the tapped marker (uses react-dom).