SDKs · Flutter

Step 3 — Markers & clustering

Default dots or custom pins, and clustering.

Add markers

markers is a list of UbHubMarker. A bare UbHubMarker(point) is the default dot; add an icon and a label for a pin. Asset icons go under flutter: assets: in your pubspec.

Markers

UbHubMap(
  options: options,
  height: 480,
  markers: [
    // A bare marker is the default blue dot:
    const UbHubMarker(GeoPoint(latitude: 47.9184, longitude: 106.9177)),
    // A custom pin with an icon and a label:
    UbHubMarker(
      place.location,
      id: place.id,
      icon: UbHubMarkerIcon.asset('assets/pin.png'), // or .bytes(pngBytes, name: 'pin')
      label: place.name,
      data: place,
    ),
  ],
);

Cluster markers

Clustering

UbHubMap(
  options: options,
  height: 480,
  markers: markers,
  clusterMarkers: true, // tap a cluster to zoom in (capped at 16)
  clusterRadius: 50,
  clusterMaxZoom: 14,
);