source property
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 MapShapeSource _mapSublayerSource;
@override
void initState() {
_mapSource = MapShapeSource.asset(
"assets/world_map.json",
shapeDataField: "name",
);
_mapSublayerSource = MapShapeSource.asset(
"assets/africa.json",
shapeDataField: "name",
);
super.initState();
}
@override
Widget build(BuildContext context) {
return SfMaps(
layers: [
MapShapeLayer(
source: _mapSource,
sublayers:[
MapShapeSublayer(
source: _mapSublayerSource,
color: Colors.red,
),
]
)
],
);
}
See also:
- MapShapeSource.primaryValueMapper, to map the data of the data source collection with the respective MapShapeSource.shapeDataField in .json file.
- MapShapeSource.bubbleSizeMapper, to customize the bubble size.
- MapShapeSource.dataLabelMapper, to customize the data label's text.
- MapShapeSource.shapeColorValueMapper and MapShapeSource.shapeColorMappers, to customize the shape colors.
- MapShapeSource.bubbleColorValueMapper and MapShapeSource.bubbleColorMappers, to customize the bubble colors.
Implementation
final MapShapeSource source;