markerTooltipBuilder property

Returns the widget for the tooltip of the MapMarker.

To show the tooltip for markers, return a customized widget in this. This widget will then be wrapped in the in-built shape which comes with the nose at the bottom.

This will be called when the user interacts with the markers i.e., while tapping in touch devices and hovering in the mouse enabled devices.

See also:

MapLayer.tooltipSettings, to customize the color and stroke of the tooltip.
SfMapsThemeData.tooltipBorderRadius, to customize the corners of the tooltip.

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

@override
void initState() {
  _data = <MapLatLng>[
    MapLatLng(11.1271, 78.6569),
    MapLatLng(15.3173, 75.7139),
    MapLatLng(28.7041, 77.1025)
  ];

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

  _mapSublayerSource = MapShapeSource.asset(
    "assets/india.json",
    shapeDataField: "name",
  );

  _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,
                initialMarkersCount: 3,
                markerBuilder: (BuildContext context, int index) {
                  return MapMarker(
                    latitude: _data[index].latitude,
                    longitude: _data[index].longitude,
                  );
               },
               markerTooltipBuilder: (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