source property

MapShapeSource source
final

The source that maps the data source with the shape file and provides data for the elements of the this layer like data labels, bubbles, tooltip, and shape colors.

The source can be set as the .json file from an asset bundle, network or from Uint8List as bytes.

The MapShapeSource.shapeDataField property is used to refer the unique field name in the .json file to identify each shapes and map with the respective data in the data source.

By default, the value specified for the MapShapeSource.shapeDataField in the GeoJSON file will be used in the elements like data labels, tooltip, and legend for their respective shapes.

However, it is possible to keep a data source and customize these elements based on the requirement. The value of the MapShapeSource.shapeDataField will be used to map with the respective data returned in MapShapeSource.primaryValueMapper from the data source.

Once the above mapping is done, you can customize the elements using the APIs like MapShapeSource.dataLabelMapper, MapShapeSource.shapeColorMappers, etc.

late MapShapeSource _mapSource;
late List<Model> _data;

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

  _mapSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "name",
    dataCount: _data.length,
    primaryValueMapper: (int index) {
      return _data[index].country;
    },
    dataLabelMapper: (int index) {
      return _data[index].country;
    }
  );

  super.initState();
}

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

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

 final String country;
 final double usersCount;
 final String storage;
 final Color  color;
}

See also:

Implementation

final MapShapeSource source;