MapColorMapper class

Customizes the shape or bubble color based on the data source and sets the text and icon color for legend items.

MapShapeSource.shapeColorMappers and MapShapeSource.bubbleColorMappers accepts collection of MapColorMapper.

MapShapeSource.shapeColorValueMapper and MapShapeSource.bubbleColorValueMapper returns a color or value based on which shape or bubble color will be updated.

If they return a color, then this color will be applied to the shapes or bubbles straightaway.

If they return a value other than the color, then you must set the MapShapeSource.shapeColorMappers or MapShapeSource.bubbleColorMappers property.

The value returned from the MapShapeSource.shapeColorValueMapper and MapShapeSource.bubbleColorValueMapper will be used for the comparison in the MapColorMapper.value or MapColorMapper.from and MapColorMapper.to. Then, the MapColorMapper.color will be applied to the respective shape or bubble.

Legend icon's color and text will be taken from MapColorMapper.color or MapColorMapper.text respectively.

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

late List<Model> _data;
late MapShapeSource _mapSource;

 @override
 void initState() {
   super.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;
     },
     shapeColorValueMapper: (int index) {
        return _data[index].storage;
     },
     shapeColorMappers: [
        MapColorMapper(value: "Low", color: Colors.red),
        MapColorMapper(value: "High", color: Colors.green)
     ],
   );
 }

 @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 shape based on the range between MapColorMapper.from and MapColorMapper.to properties of MapColorMapper.

late List<Model> _data;
late MapShapeSource _mapSource;

 @override
 void initState() {
   super.initState();

   _data = <Model>[
    Model('India', 100, "Low"),
    Model('United States of America', 200, "High"),
    Model('Pakistan', 75, "Low"),
   ];

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

 @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;
}

Constructors

Properties

Methods

Operators

maps library