We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi Dhananjay,
We would like to inform you that currently, there is no option to add the legend for Tile Layer in SfMaps. However, we can add the legend in the MapShapeLayer for either shape or bubble layer by setting the MapElement.shape or MapElement.bubble respectively to the legends property. By default, the text of the legend items will be rendered based on the value of the shapeDataField property, and it can be changed according to your needs using the text property in the MapColorMapper. Similarly, the icons color of the Legend items is applied based on the colors returned from the shapeColorValueMapper property, and it is possible to customize the icon color of the legend item using the color property in the MapColorMapper. Likewise, you can customize the icon and text of the legend item for the bubble layer using the bubbleColorMappers property.
It is important to note that if the shapeColorMappers property is given, then we must give both the primaryValueMapper and shapeColorValueMapper properties. Currently, in SfMaps, as the legend will be rendered only for shape and bubble in MapShapeLayer, there is no direct option to render the Legend for the markers in the ShapeLayer. However, you can customize the bubble Layer as a marker using the bubbleSettings properties, and you can render the Legend based on the bubble.
We have prepared a sample using MapShapeLayer and render the Legend for the shape, and we have customized the text and icons of the Legend items using the shapeColorMappers properties.
Kindly refer the code snippet below:
|
class MyHomePage extends StatefulWidget { const MyHomePage({super.key});
@override State<MyHomePage> createState() => _MyHomePageState(); }
class _MyHomePageState extends State<MyHomePage> { late MapShapeSource dataSource; late List<DataModel> data; late Random random;
@override void initState() { data = <DataModel>[ DataModel( from: const MapLatLng(28.7041, 77.1025), to: const MapLatLng(56.1304, -106.3468), continent: 'Asia', count: 01.0, density: 280, color: Colors.red, bubbleColor: Colors.orange), DataModel( from: const MapLatLng(28.7041, 77.1025), to: const MapLatLng(-9.1900, -75.0152), continent: 'Africa', count: 01.0, density: 190, color: Colors.blue, bubbleColor: Colors.indigo, ), DataModel( from: const MapLatLng(28.7041, 77.1025), to: const MapLatLng(61.5240, 105.3188), continent: 'Europe', count: 01.0, density: 37, color: Colors.green, bubbleColor: Colors.amberAccent, ), DataModel( from: const MapLatLng(28.7041, 77.1025), to: const MapLatLng(-25.2744, 133.7751), continent: 'North America', count: 01.0, density: 310, color: Colors.yellow, bubbleColor: Colors.pink, ), ];
dataSource = MapShapeSource.asset( 'assets/world_map.json', shapeDataField: 'continent', dataCount: data.length, primaryValueMapper: (int index) => data[index].continent!, shapeColorValueMapper: (int index) => data[index].density, // Customize the legend items for shapes based on the density // value passed to the shapeColorValueMapper. shapeColorMappers: [ const MapColorMapper( from: 0, to: 100, color: Colors.red, text: 'Europe'), const MapColorMapper( from: 101, to: 200, color: Colors.green, text: 'Africa'), const MapColorMapper( from: 201, to: 300, color: Colors.blue, text: 'Asia'), const MapColorMapper( from: 301, to: 400, color: Colors.orange, text: 'North America'), ],
// To render the Legend based on the bubble you can uncomment the below lines. // bubbleSizeMapper: (index) => data[index].count, // bubbleColorValueMapper: (index) => data[index].density, // bubbleColorMappers: [ // const MapColorMapper( // from: 0, to: 100, color: Colors.yellow, text: 'Europe'), // const MapColorMapper( // from: 101, to: 200, color: Colors.black, text: 'Africa'), // const MapColorMapper( // from: 201, to: 300, color: Colors.indigoAccent, text: 'Asia'), // const MapColorMapper( // from: 301, to: 400, color: Colors.pinkAccent, text: 'North America'), // ], );
random = Random(); super.initState(); }
@override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Padding( padding: const EdgeInsets.all(10), child: SfMaps( layers: [ MapShapeLayer( source: dataSource, legend: const MapLegend( MapElement.shape, enableToggleInteraction: true, ), tooltipSettings: const MapTooltipSettings( hideDelay: double.infinity, color: Colors.white, strokeWidth: 2, strokeColor: Colors.black, ), shapeTooltipBuilder: (context, index) { return Container( height: 50, width: 100, color: Colors.amber, child: Center( child: Text( data[index].continent!, ), ), ); }, ), ], ), ), ), ); } }
class DataModel { DataModel({ this.from, this.to, this.continent, this.count, this.density, this.color, this.bubbleColor, });
final MapLatLng? from; final MapLatLng? to; final String? continent; final double? count; final double? density; final Color? color; final Color? bubbleColor; } |
Snapshot:
For Shape Legend:
For Bubble Legend:
Shared the User Guide documentation link below regarding the Legend in the SfMaps.
UG: https://help.syncfusion.com/flutter/maps/legend
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.
