bubbleTooltipBuilder property

Returns a widget for the bubble tooltip based on the index.

A bubble tooltip displays additional information about the bubble on a map. To show tooltip for the bubble, return a widget in MapShapeSublayer.bubbleTooltipBuilder. This widget will then be wrapped in the existing tooltip shape which comes with the nose at the bottom.

It is possible to customize the stroke appearance using the MapTooltipSettings.strokeColor and MapTooltipSettings.strokeWidth. To customize the corners, use SfMapsThemeData.tooltipBorderRadius.

The MapShapeSublayer.bubbleTooltipBuilder callback will be called when the user interacts with the bubbles i.e., while tapping in touch devices and hovering in the mouse enabled devices.

late MapShapeSource _mapSource;
late MapShapeSource _mapSublayerSource;
late List<DataModel> _data;
late MapZoomPanBehavior _zoomPanBehavior;

@override
void initState() {
  _data = <DataModel>[
    DataModel('Orissa', 280, "Low", Colors.red),
    DataModel('Karnataka', 190, "High", Colors.green),
    DataModel('Tamil Nadu', 37, "Low", Colors.yellow),
  ];

  _mapSource = MapShapeSource.asset("assets/world_map.json",
      shapeDataField: "continent");

  _mapSublayerSource = MapShapeSource.asset("assets/india.json",
      shapeDataField: "name",
      dataCount: _data.length,
      primaryValueMapper: (int index) => _data[index].country,
      bubbleColorValueMapper: (int index) {
        return _data[index].color;
      },
      bubbleSizeMapper: (int index) {
        return _data[index].usersCount;
      });

  _zoomPanBehavior = MapZoomPanBehavior(
      zoomLevel: 5, focalLatLng: MapLatLng(28.7041, 77.1025));

  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: EdgeInsets.all(15),
      child: SfMaps(
        layers: <MapLayer>[
          MapShapeLayer(
            source: _mapSource,
            zoomPanBehavior: _zoomPanBehavior,
            sublayers: [
              MapShapeSublayer(
               source: _mapSublayerSource,
               bubbleTooltipBuilder: (BuildContext context, int index) {
                  if (index == 0) {
                    return Container(
                      child: Icon(Icons.airplanemode_inactive),
                    );
                  } else {
                    return Container(
                      child: Icon(Icons.airplanemode_active),
                    );
                  }
                },
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

class DataModel {
  const DataModel(
    this.country,
    this.usersCount,
    this.storage,
    this.color,
  );

  final String country;
  final double usersCount;
  final String storage;
  final Color color;
}

Implementation

MapShapeSublayer class