map legend cause exception in code
Hi,
I try to follow your code for setup map legend at https://help.syncfusion.com/flutter/maps/legend. My code also face exception as show in the screenshot below
late MapShapeSource _shapeSource;
late List<Model> _data;
@override
void initState() {
_data = <Model>[
const Model('Preaek Phnov', 480, "Low"),
const Model('Thma Puok', 190, "High"),
const Model('Batheay', 37, "Low"),
];
_shapeSource = MapShapeSource.asset(
'assets/maps/json/cambodia.json',
shapeDataField: 'Name',
dataCount: _data.length,
primaryValueMapper: (int index) {
return _data[index].country;
},
shapeColorValueMapper: (int index) {
return _data[index].count;
},
shapeColorMappers: [
const MapColorMapper(
from: 0, to: 100, color: Colors.red, text: '< 100/km'),
const MapColorMapper(
from: 101, to: 200, color: Colors.green, text: '100 - 200/km'),
const MapColorMapper(
from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'),
const MapColorMapper(
from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'),
],
);
super.initState();
}
Hi Sao,
Based on the provided code snippet, we understand that you are using range coloring by specifying the range between the from and to properties of MapColorMapper. This range is used to determine the color based on the count returned from the shapeColorValueMapper property. However, the mentioned type cast error occurs when the value of the count is not within the range specified in the corresponding from and to properties and it is the current behavior of range coloring. In the provided code snippet, you have given the value of the count as 480 and there is no range specified for this in the shapeColorMappers property which leads to the type cast error.
Therefore, we recommend you assign the value of the count based on the range specified in the shapeColorMappers property to avoid the mentioned type cast error as shown in the code snippet below.
|
class _MyHomePageState extends State<MyHomePage> { late MapShapeSource _shapeSource; late List<MapModel> _data;
@override void initState() { _data = <MapModel>[ MapModel( states: 'Jammu & Kashmir', count: 50, name: "Low", ), MapModel( states: 'Gujarat', count: 190, name: "High", ), MapModel( states: 'Tamil Nadu', count: 250, name: "Low", ), ];
_shapeSource = MapShapeSource.asset( 'assets/india.json', shapeDataField: 'name', dataCount: _data.length, primaryValueMapper: (int index) { return _data[index].states!; }, shapeColorValueMapper: (int index) { return _data[index].count; }, shapeColorMappers: [ const MapColorMapper( from: 0, to: 100, color: Colors.red, text: 'Jammu & Kashmir'), const MapColorMapper( from: 101, to: 200, color: Colors.green, text: 'Gujarat'), const MapColorMapper( from: 201, to: 300, color: Colors.blue, text: 'Tamil Nadu'), ], );
super.initState(); }
@override Widget build(BuildContext context) { return Scaffold( body: Padding( padding: const EdgeInsets.all(10), child: SfMaps( layers: [ MapShapeLayer( source: _shapeSource, legend: const MapLegend(MapElement.shape), ), ], ), ), ); } }
class MapModel { final String? states; final num? count; final String? name;
MapModel({ this.states, this.count, this.name, }); } |
Snapshot:
If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
