CODEWITHSUNDEEP
flutterdartmapsgeojsonsyncfusion
Matt Larsuma
Matt Larsuma

Reputation: 1519

Flutter syncfusion maps - tweak placement of dataLabels

Is it possible to change the alignment or placement of the dataLabels while using the syncfusion_flutter_maps package? For the most part they are centered, but this example where Florida is on the border of land and sea is not ideal. I've explored MapDataLabelSettings and SfMapsThemeData and TextStyle and overflow is pretty much the extend of customizability around the appearance of the dataLabels.

enter image description here

Upvotes: 0

Views: 186

Answers (1)

yuva
yuva

Reputation: 551

The data label placement in the MapShapLayer used the centered polygon logic only and the shape of the Florida polygon is not in the proper position. So you can achieve your requirement with the help of markerBuilder and initialMarkersCount property in the map, by setting the data label value of Florida to an empty string and rendering a custom marker in that location with the help of latitude and longitude value of Florida. It will render a text widget with the string FL in the center. We have shared the code snippet below for your reference.

Code snippet:

SfMaps(
  layers: <MapLayer>[
    MapShapeLayer(
      loadingBuilder: (BuildContext context) {
        return const SizedBox(
          height: 25,
          width: 25,
          child: CircularProgressIndicator(
            strokeWidth: 3,
          ),
        );
      },
      initialMarkersCount: 1,
      markerBuilder: (context, index) {
        return const MapMarker(
            latitude: 27.6648,
            longitude: -81.5158,
            child: Text(
              'FL',
              style: TextStyle(color: Colors.black, fontSize: 9),
            ));
      },
      source: _mapSource,     
      showDataLabels: true,
      dataLabelSettings: const MapDataLabelSettings(
        overflowMode: MapLabelOverflow.hide,
        textStyle: TextStyle(color: Colors.black, fontSize: 9),
      ),
    ),
  ],
)

Screenshot:

enter image description here

Upvotes: 1

Related Questions