Only have toolTips appear for certain shapes

[SueAnn]

I have certain shapes that I don't want a toolTip to appear for and some that I do want toolTips for. I currently have their text set to " " but the tooltip still shows up blank.

This for example would be a feature I wouldn't want a tooltip to show up for because FULLNAME = " ".

{
  "type": "Feature",
  "properties":{
    "ID": "0",
    "COLOR": "#ffd700",
    "NAME": "L10",
    "FULLNAME": " ",
    "TYPE": "Student Parking"
  },
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [-31.721048951149,40.284317829742655],
        [-31.7240154743195, 40.284240077494225],
        [-31.7240101099014, 40.28345436554472],
        [-31.7210328578949, 40.283499380538466],
        [-31.721048951149, 40.284317829742655]
      ]
    ]
  }
},

My main.dart

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  late MapShapeSource _shapeSource;
  late List _mapData;
  late MapZoomPanBehavior _zoomPanBehavior;

  //get toolTipColor => (int index) => _mapData[index].tooltipcolor; //get color for tooltip

  @override
  void initState() {
    _mapData = [];
    _zoomPanBehavior = MapZoomPanBehavior();
    super.initState();
  }

  Future getJsonFromAssets() async {
    return await rootBundle.loadString('assets/uvu.json');
  }

  Future loadMapData() async {
    final String jsonString = await getJsonFromAssets();
    final Map, dynamic> jsonResponse = jsonDecode(jsonString);
    List<dynamic> feature = jsonResponse['features'];
    for (int i = 0; i < feature.length; i++) {
      _mapData.add(
          MapModel.fromJson(feature[i]['properties'] as Map, dynamic>));
      print(feature[i]['properties']);
    }

    _shapeSource = MapShapeSource.asset('assets/uvu.json',
        shapeDataField: 'ID',
        dataCount: _mapData.length,
        primaryValueMapper: (int index) => _mapData[index].id!,
        dataLabelMapper: (int index) => _mapData[index].name!,
        shapeColorValueMapper: (int index) => _mapData[index].color);
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: 500,
          width: 400,
          child: FutureBuilder(
              future: loadMapData(),
              builder: (context, snapdata) {
                if (snapdata.hasData) {
                  return SfMaps(
                    layers: [
                      MapShapeLayer(
                        source: _shapeSource,
                        zoomPanBehavior: _zoomPanBehavior,
                        showDataLabels: true,
                        //don't want a tooltip for evry shape only a few select shapes
                        shapeTooltipBuilder: (BuildContext context, int index){
                          return Padding(
                              padding: const EdgeInsets.all(7),
                              child: Text(_mapData[index].fullname!,
                                  style: const TextStyle(
                                      color: Colors.white)));
                        },
                        //dataLabelSettings: MapDataLabelSettings(
                        //overflowMode: MapLabelOverflow.ellipsis,
                        //),
                      ),
                    ],
                  );
                } else {
                  return CircularProgressIndicator();
                }
              }),
        ),
      ),
    );
  }
}

class MapModel {
  // Data type
  String? id;
  String? name;
  String? fullname;
  Color? color;
  Color? tooltipcolor;

  //constructor
  //MapModel({this.name, this.color, this.id});
  //MapModel({this.id, this.name, this.fullname, this.color});
  //MapModel({this.id, this.name, this.color});
  MapModel({this.id, this.name, this.fullname, this.color, this.tooltipcolor});

  // Method that assigns values to respective datatype variables
  factory MapModel.fromJson(Map, dynamic> json) {
    Color modelColor = Colors.black;
    String modelName = json["NAME"];
    String modelId = json["ID"];
    String modelFullName = json["FULLNAME"];
    Color modeltooltipcolor = Colors.grey;

    if(json["FULLNAME"] == " "){
      Color modeltooltipcolor = Colors.transparent;
    }

    /// While fetching the color codes as String from JSON. Use these codes to convert it as Color.
    //String strColor = json['COLOR'] as String;
    //Color hexColor = Color(int.parse(strColor.substring(1, 7), radix: 16) + 0xFF000000);

    if(json["TYPE"] == "Parking Garage"){
      modelColor = Colors.red;
    }
    if(json["TYPE"] == "Student Parking"){
      modelColor = Colors.yellow;
    }
    if(json["TYPE"] == "Inside"){
      modelColor = Colors.white;
    }
    if(json["TYPE"] == "Faculty Parking"){
      modelColor = Colors.deepOrange;
    }
    if(json["TYPE"] == "Grass"){
      modelColor = Colors.green;
    }
    if(json["TYPE"] == "Water"){
      modelColor = Colors.blueAccent;
    }
    if(json["TYPE"] == "Building"){
      modelColor = Colors.grey;
    }
    if(json["TYPE"] == "Visitor Parking"){
      modelColor = Colors.pinkAccent;
    }

    //return MapModel(name: modelName, color: modelColor, id: modelId);
    //return MapModel(id: modelId ,name: modelName, fullname: modelFullName , color: modelColor);
    //return MapModel(id: modelId ,name: modelName , color: modelColor);
    return MapModel(id: modelId ,name: modelName, fullname: modelFullName , color: modelColor, tooltipcolor: modeltooltipcolor);
  }
}

[Yuvaraj Gajaraj]

Hi Sueann,

Greetings from Syncfusion. We suggest you return the SizedBox in the shapeTooltipBuilder if you do not need to have a tooltip for a particular shape or item. We have attached the code snippet below to accomplish this and you can change this based on your requirement.

Code snippet:

shapeTooltipBuilder: (BuildContext context, int index) {

  if (FullName == '') {

    return const Padding(

        padding: EdgeInsets.all(7),

        child: Text('Tooltip',

            style: TextStyle(color: Colors.white)));

  } else {

    return const SizedBox(

      width: 0,

      height: 0,

    );

  }

},

If you have any other queries, please get back to us.

Regards,

Yuvaraj.