SDKs · React & Next.js

Step 3 — Markers & clustering

Draw default dots or custom pins, and group many markers.

Add markers

markers is a list of UbHubMarker. A bare { position } is the default dot; add an icon (any image URL) and a label for a pin.

Markers

import { UbHubMap, type UbHubMarker } from "@ubhub/maps/react";

const markers: UbHubMarker[] = [
  // A bare marker is the default blue dot:
  { position: { latitude: 47.9184, longitude: 106.9177 } },
  // A custom pin with an icon and a label:
  {
    position: { latitude: 47.922, longitude: 106.9057 },
    id: "office",
    icon: { name: "pin", url: "/pin.png" }, // any image URL
    label: "Office",
    data: { any: "payload" }, // returned on tap
  },
];

<UbHubMap style={{ height: 480 }} markers={markers} />;

Cluster markers

With many markers, group them into count bubbles. Tapping a cluster zooms in.

Clustering

<UbHubMap
  style={{ height: 480 }}
  markers={markers}
  clusterMarkers          // group nearby markers; tap a cluster to zoom in
  clusterRadius={50}
  clusterMaxZoom={14}
/>;