Flutter-docs/Flutter/maps/data-labels.md

layout	title	description	platform	control	documentation
post	Data Labels in Flutter Maps widget | Syncfusion	Learn here all about the Data Labels feature of Syncfusion Flutter Maps (SfMaps) widget to add labels to the shapes and more.	Flutter	SfMaps	ug

Data Labels in Flutter Maps (SfMaps)

Data labels provides identification for the shapes by displaying their names. You can trim or hide the labels if they exceed the shape bounds.

Show data labels

You can show data labels on the map using the MapShapeLayer.showDataLabels property. By default, the data labels are rendered based on the value of shapeDataField property. The default value of the showDataLabels property is false.

{% tabs %} {% highlight Dart %}

late MapShapeSource dataSource;

@override void initState() { dataSource = MapShapeSource.asset( "assets/world_map.json", shapeDataField: "continent", ); super.initState(); }

@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Padding( padding: EdgeInsets.only(left: 15, right: 15), child: SfMaps( layers: [ MapShapeLayer( source: dataSource, showDataLabels: true, ), ], ), ), ), ); }

{% endhighlight %} {% endtabs %}

Text customization

You can customize text of the data labels using the MapShapeSource.dataLabelMapper property.

{% tabs %} {% highlight Dart %}

late List data; late MapShapeSource dataSource;

@override void initState() { super.initState(); data = const [ Model('Asia', 'Asia'), Model('Europe', 'EU'), Model('North America', 'NA'), Model('South America', 'SA'), Model('Australia', 'Australia'), Model('Africa', 'Africa') ];

dataSource = MapShapeSource.asset(
   "assets/world_map.json",
   shapeDataField: "continent",
   dataCount: data.length,
   primaryValueMapper: (int index) => data[index].continent,
   dataLabelMapper: (int index) => data[index].code,
);

}

@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Padding( padding: EdgeInsets.only(left: 15, right: 15), child: SfMaps( layers: [ MapShapeLayer( source: dataSource, showDataLabels: true, ), ], ), ), ), ); }

class Model { const Model(this.continent, this.code);

final String continent; final String code; }

{% endhighlight %} {% endtabs %}

Overflow mode

You can trim or remove the data label when it is overflowed from the shape using the MapDataLabelSettings.overflowMode property. The possible values are visible, ellipsis, and hide. The default value of the overflowMode property is MapLabelOverflow.visible.

By default, the data labels will render even if it overflows from the shape.

{% tabs %} {% highlight Dart %}

late List data; late MapShapeSource dataSource;

@override void initState() { data = [ Model('New South Wales', 'New South Wales'), Model('Queensland', 'Queensland'), Model('Northern Territory', 'Northern sTerritory'), Model('Victoria', 'Victoria'), Model('South Australia', 'South Australia'), Model('Western Australia', 'Western Australia'), Model('Tasmania', 'Tasmania'), ];

dataSource = MapShapeSource.asset(
  'assets/australia.json',
   shapeDataField: 'STATE_NAME',
   dataCount: data.length,
   primaryValueMapper: (int index) => data[index].state,
   dataLabelMapper: (int index) => data[index].dataLabel,
);
super.initState();

}

@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Padding( padding: EdgeInsets.only(left: 15, right: 15), child: SfMaps( layers: [ MapShapeLayer( source: dataSource, showDataLabels: true, dataLabelSettings: MapDataLabelSettings( overflowMode: MapLabelOverflow.ellipsis, ), ), ], ), ), ), ); }

class Model { Model(this.state, this.dataLabel);

String state; String dataLabel; }

{% endhighlight %} {% endtabs %}

Appearance customization

You can customize the data labels using the MapDataLabelSettings.textStyle property.

{% tabs %} {% highlight Dart %}

late List data; late MapShapeSource dataSource;

@override void initState() { data = [ Model('New South Wales', 'New South Wales'), Model('Queensland', 'Queensland'), Model('Northern Territory', 'Northern sTerritory'), Model('Victoria', 'Victoria'), Model('South Australia', 'South Australia'), Model('Western Australia', 'Western Australia'), Model('Tasmania', 'Tasmania'), ];

dataSource = MapShapeSource.asset(
   'assets/australia.json',
   shapeDataField: 'STATE_NAME',
   dataCount: data.length,
   primaryValueMapper: (int index) => data[index].state,
   dataLabelMapper: (int index) => data[index].dataLabel,
);
super.initState();

}

@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Padding( padding: EdgeInsets.only(left: 15, right: 15), child: SfMaps( layers: [ MapShapeLayer( source: dataSource, showDataLabels: true, dataLabelSettings: MapDataLabelSettings( textStyle: const TextStyle( color: Colors.red, fontSize: 12, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic, fontFamily: 'Times'), ), ), ], ), ), ), ); }

class Model { Model(this.state, this.dataLabel);

String state; String dataLabel; }

{% endhighlight %} {% endtabs %}

Using SfMapsTheme

You can also customize the data labels using the SfMapsThemeData.dataLabelTextStyle property in SfMapsTheme.

N> You must import the theme.dart library from the Core package to use SfMapsTheme.

{% tabs %} {% highlight Dart %}

late List data; late MapShapeSource dataSource;

@override void initState() { data = [ Model('New South Wales', 'New South Wales'), Model('Queensland', 'Queensland'), Model('Northern Territory', 'Northern sTerritory'), Model('Victoria', 'Victoria'), Model('South Australia', 'South Australia'), Model('Western Australia', 'Western Australia'), Model('Tasmania', 'Tasmania'), ];

dataSource = MapShapeSource.asset(
   'assets/australia.json',
   shapeDataField: 'STATE_NAME',
   dataCount: data.length,
   primaryValueMapper: (int index) => data[index].state,
   dataLabelMapper: (int index) => data[index].dataLabel,
);
super.initState();

}

@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Padding( padding: EdgeInsets.only(left: 15, right: 15), child: SfMapsTheme( data: SfMapsThemeData( dataLabelTextStyle: TextStyle( color: Colors.red, fontSize: 12, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic, fontFamily: 'Times'), ), child: SfMaps( layers: [ MapShapeLayer( source: dataSource, showDataLabels: true, ), ], ), ), ), ), ); }

class Model { Model(this.state, this.dataLabel);

String state; String dataLabel; }

{% endhighlight %} {% endtabs %}