Data Labels in Flutter Maps (SfMaps)

18 Nov 201817 minutes to read

Data labels provide 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

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

class MapsExample extends StatefulWidget {
  @override
  _MapsExampleState createState() => _MapsExampleState();
}

class _MapsExampleState extends State<MapsExample> {
  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

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

class MapsExample extends StatefulWidget {
  @override
  _MapsExampleState createState() => _MapsExampleState();
}

class _MapsExampleState extends State<MapsExample> {
  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 they overflow from the shape.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

class MapsExample extends StatefulWidget {
  @override
  _MapsExampleState createState() => _MapsExampleState();
}

class _MapsExampleState extends State<MapsExample> {
  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 Territory'),
        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

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

class MapsExample extends StatefulWidget {
  @override
  _MapsExampleState createState() => _MapsExampleState();
}

class _MapsExampleState extends State<MapsExample> {
  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 Territory'),
        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

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_maps/maps.dart';
import 'package:syncfusion_flutter_core/theme.dart';

class MapsExample extends StatefulWidget {
  @override
  _MapsExampleState createState() => _MapsExampleState();
}

class _MapsExampleState extends State<MapsExample> {
  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 Territory'),
        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;
}