bubbleColorMappers property

Collection of MapColorMapper which specifies bubble's color based on the data.

It provides option to set the bubble color based on the specific MapColorMapper.value or the range of values which falls between MapColorMapper.from and MapColorMapper.to.

The below code snippet represents how color can be applied to the bubble based on the MapColorMapper.value property of MapColorMapper.

late List<Model> _data;
late MapShapeSource _mapSource;

@override
void initState() {
  _data = <Model>[
   Model('India', 280, "Low"),
   Model('United States of America', 190, "High"),
   Model('Pakistan', 37, "Low"),
  ];

  _mapSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "name",
    dataCount: _data.length,
    primaryValueMapper: (int index) {
      return _data[index].country;
    },
    bubbleColorValueMapper: (int index) {
      return _data[index].count;
    },
    bubbleSizeMapper: (int index) {
      return _data[index].count;
    },
    bubbleColorMappers: [
      MapColorMapper(from: 0, to: 100, color: Colors.red),
      MapColorMapper(from: 101, to: 300, color: Colors.yellow)
    ]
  );

  super.initState();
}

@override
Widget build(BuildContext context) {
  return SfMaps(
    layers: [
      MapShapeLayer(
        source: _mapSource,
      )
    ],
  );
}

class Model {
 const Model(this.country, this.count, this.storage);

 final String country;
 final double count;
 final String storage;
}

The below code snippet represents how color can be applied to the bubble based on the range between MapColorMapper.from and MapColorMapper.to properties of MapColorMapper.

late List<Model> _data;
late MapShapeSource _mapSource;

@override
void initState() {
  _data = <Model>[
   Model('India', 280, "Low"),
   Model('United States of America', 190, "High"),
   Model('Pakistan', 37, "Low"),
  ];

  _mapSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "name",
    dataCount: _data.length,
    primaryValueMapper: (int index) {
      return _data[index].country;
    },
    bubbleColorValueMapper: (int index) {
      return _data[index].storage;
    },
    bubbleSizeMapper: (int index) {
      return _data[index].count;
    },
   bubbleColorMappers: [
     MapColorMapper(value: "Low", color: Colors.red),
     MapColorMapper(value: "High", color: Colors.yellow)
   ]
  );

  super.initState();
}

@override
Widget build(BuildContext context) {
  return SfMaps(
    layers: [
      MapShapeLayer(
        source: _mapSource,
      )
    ],
  );
}

class Model {
 const Model(this.country, this.count, this.storage);

 final String country;
 final double count;
 final String storage;
}

Implementation

MapShapeSource class