How to display figure on map or change color of shape file base on number
Hi Sao,
We have analyzed your query and you can use the markerBuilder property to render any widget at the specified latitude and longitude. We have prepared a sample to render marker in five places using MapShapeLayer. The latitude and longitude values for each marker are provided through the latitude property and longitude property of the MapMarker.
In this case, you can assign any widget to the child property of the MapMarker based on your requirements. The markerBuilder callback will be called a number of times equal to the value specified in the initialMarkersCount property.
Furthermore, we have modified the color of the shapes based on the values specified in the shapeColorMappers property, which determines the color range between the from and to properties. Shared the User Guide documentation below regarding the marker in SfMaps for your reference.
UG: https://help.syncfusion.com/flutter/maps/markers.
For more details, also shared the User Guide documentation and Knowledge base links below regarding the SfMaps for your reference.
UG: https://help.syncfusion.com/flutter/maps/getting-started
KB: https://support.syncfusion.com/kb/cross-platforms/section/1208
Kindly review the code snippet below:
|
class _MainAppState extends State<MainApp> { late List<MapModel> _mapData; late MapShapeSource _mapSource; @override void initState() { _mapData = _getMapData(); _mapSource = MapShapeSource.asset( 'assets/world_map.json', shapeDataField: 'continent', dataCount: _mapData.length, primaryValueMapper: (int index) { return _mapData[index].continent!; }, dataLabelMapper: (int index) { return _mapData[index].continent!; }, shapeColorValueMapper: (int index) { return _mapData[index].value; }, shapeColorMappers: [ const MapColorMapper( from: 0, to: 100, color: Colors.green, ), const MapColorMapper( from: 100, to: 200, color: Colors.blue, ), const MapColorMapper( from: 200, to: 300, color: Colors.pink, ), const MapColorMapper( from: 300, to: 400, color: Colors.green, ), const MapColorMapper( from: 400, to: 500, color: Colors.amber, ), ], ); super.initState(); }
@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: SfMaps( layers: [ MapShapeLayer( source: _mapSource, showDataLabels: true, initialMarkersCount: 5, markerBuilder: (BuildContext context, int index) { return MapMarker( latitude: _mapData[index].latitude!, longitude: _mapData[index].longitude!, size: const Size(20, 20), child: const Icon( Icons.location_on, color: Colors.white, ), ); }, dataLabelSettings: const MapDataLabelSettings( textStyle: TextStyle( color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold, ), ), ), ], ), ), ); }
static List<MapModel> _getMapData() { return <MapModel>[ MapModel( continent: 'Asia', country: 'India', latitude: 20.593684, longitude: 78.96288, value: 50, ), MapModel( continent: 'Europe', country: 'Germany', latitude: 51.16569, longitude: 10.451526, value: 150, ), MapModel( continent: 'South America', country: 'Brazil', latitude: -14.235004, longitude: -51.92528, value: 250, ), MapModel( continent: 'Asia', country: 'Russia', latitude: 61.52401, longitude: 105.318756, value: 350, ), MapModel( continent: 'Australia', country: 'Australia', latitude: -25.274398, longitude: 133.775136, value: 450, ), ]; } }
class MapModel { final String? continent; final String? country; final double? latitude; final double? longitude; final double? value;
MapModel({ this.continent, this.country, this.latitude, this.longitude, this.value, }); } |
Snapshot:
Also attached the sample below for your reference and you can modify the sample according to your needs. If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
Attachment: 184257_5acc9992.zip
