Data Labels in Flutter Maps (SfMaps)

5 May 202114 minutes to read

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.

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,
              ),
            ],
        ),
      ),
    ),
  );
}

Text customization

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

DART

late List<Model> data;
late MapShapeSource dataSource;

@override
void initState() {
    super.initState();
    data = const <Model>[
      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;
}

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.

DART

late List<Model> data;
late MapShapeSource dataSource;

@override
void initState() {
    data = <Model>[
      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;
}

Appearance customization

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

DART

late List<Model> data;
late MapShapeSource dataSource;

@override
void initState() {
    data = <Model>[
      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;
}

Using SfMapsTheme

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

NOTE

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

DART

late List<Model> data;
late MapShapeSource dataSource;

@override
void initState() {
    data = <Model>[
      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;
}