shapeTooltipBuilder property

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

A shape tooltip displays additional information about the shapes on a map. To show tooltip for the shape, return a widget in MapShapeSublayer.shapeTooltipBuilder. 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.shapeTooltipBuilder callback will be called when the user interacts with the shapes 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,
      shapeColorValueMapper: (int index) => _data[index].color);

  _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,
                shapeTooltipBuilder: (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