Improvements for data label functionality

Hi,

I've been trying to implement the SfMaps lately and most things work out well, but there is also room for some improvements.
Especially the data label functionality. I will explain two use cases I've had troubles with and might have a possible solution for you as well.

Use case 1:

The GeoJson files I've been testing have been used in other software before and in that software the labels looked well positioned.
However, with some tall but thin shaped countries the centre positioning for the labels seems to go wrong.
I haven't tested the whole world map, but countries like Norway, Vietnam, Japan, Malaysia, Indonesia.

Here's a few pictures as an example:

Malaysia + Indonesia: https://pasteboard.co/K4DEn90.png
Norway: https://pasteboard.co/K4DEOYA.png
Vietnam: https://pasteboard.co/K4DHG2r.png

possible solutions: 

1: Improve the algorithm to improve label placements in these kinds of situations.
2: Ability to set Datalabel coordinates per feature (by index?). If custom coordinates given use those, otherwise the automatic determined ones from the calculated functions.

Use case 2: 

The MapDataLabelSettings + overflowMode: MapLabelOverflow.ellipsis works quite well 95% of the time.
However, on a map such as my Europe map, there are some smaller countries like for example: Luxemborg.
These countries are so small compared to the other shown countries, that on max zoomlevel (15?) the ellipsis is still showing and the full feature name is never shown.

Picture example: https://pasteboard.co/K4DI4ic.png

Possible solutions:

1: Make sure that at least all data labels will be shown on max zoom level.
2: A mapper function. With this function you can return the max/min zoomLevel to show the ellipsis or full name.

Kind regards, Tim.






6 Replies 1 reply marked as answer

LR Lakshmi Radha Krishnan Syncfusion Team June 2, 2021 06:28 PM UTC

 

Hi Tim,

 

Greetings from Syncfusion support.

 

Case 1: Improve the algorithm to improve label placements in these kinds of situations.

 

We are checking the possibilities to improve the algorithm, we will update you the details on June 4th, 2021.

 

Case 2: Make sure that at least all data labels will be shown on max zoom level.

 

We are checking the mentioned scenario, we will update you the details on June 3rd, 2021.

 

Regards,

Lakshmi R.



TI Tim June 2, 2021 06:37 PM UTC

As a third improvement I would like to suggest the possibility to open the tooltip from the centre (same as where data labels are positioned).
Maybe you could implement this as a param in the MapTooltipSettings.

Example:

Opening from centre:
tooltipSettings: const MapTooltipSettings(
position: TooltipPosition.centre
),
Opening from mouse pointer:
tooltipSettings: const MapTooltipSettings(
position: TooltipPosition.pointer
),
Also, the tooltip is closing itself automatically after a few seconds.
Maybe implement something like a closing mode on click (outside of the tooltip) would also be very helpful.

tooltipSettings: const MapTooltipSettings(
closingMode: TooltipClosingMode.click
),

And the default (as it is now)

tooltipSettings: const MapTooltipSettings(
closingMode: TooltipClosingMode.autoClose
)

Kind regards, Tim.






LR Lakshmi Radha Krishnan Syncfusion Team June 3, 2021 01:15 PM UTC

Hi Tim, 


Query 1: Make sure that at least all data labels will be shown on max zoom level. 


We would like to let you know that the behavior of data labels is that they won't change while pinching and will only change when zoom end action. At the maximum zoom level, the data label for the mentioned country (Luxemberg) is clearly visible. We have attached the sample for your reference. 


Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/data_labels_maps-1663824756.zip

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Ellipsis_data_labels-424670380.zip


Please contact us if you have any concern on this.


Query 2: I would like to suggest the possibility to open the tooltip from the centre. Maybe you could implement this as a param in the MapTooltipSettings. 


We have already considered feature request for finding center point of the shape and the status can be tracked from the feedback portal link.


Feedbackhttps://www.syncfusion.com/feedback/24301/option-for-finding-the-center-point-of-each-shape   


We will prioritize the features every release based on the demands and priority. So, this feature will be available in any of our future releases. If you have any more specification/suggestions to the feature request, you can add it as a comment in the feedback portal with the above link.


Query 3: Maybe implement something like a closing mode on click (outside of the tooltip) would also be very helpful. 


We have already considered this request as a feature and the status can be tracked from the feedback portal link.


Feedbackhttps://www.syncfusion.com/feedback/25713/provide-an-option-to-show-hide-the-tooltip-manually  


We will prioritize the features every release based on the demands and priority. So, this feature will be available in any of our future releases. If you have any more specification/suggestions to the feature request, you can add it as a comment in the feedback portal with the above link.


Regards,  

Lakshmi R. 



TI Tim June 3, 2021 06:01 PM UTC

Thanks for your reply.

Great to hear that some things are already mentioned and might be up for some future release.

However I haven't seen an answer about my current problem/bug, the misplacement of the data label across borders.
Here is a video of my map with it's issues: https://streamable.com/gbt3b5
Note: In this video I'm zoomed in to max zoom possible.


As you can see it shows the data label Norway all the way in Sweden and there are lot's of ellipsis only partially showing (even on max zoom).
You can also test my Geojson file: https://paste.ofcode.org/39TjHKYHt3nUmggxEhSsrsW

Kind regards, Tim.


LR Lakshmi Radha Krishnan Syncfusion Team June 7, 2021 12:45 PM UTC

Hi Tim, 

 

Query 1: It shows the data label Norway all the way in Sweden 

Query 2: There are lots of ellipsis only partially showing (even on max zoom) 


We have considered your request as a feature and the status can be tracked from the below feedback portal link.


Feedback: https://www.syncfusion.com/feedback/25912/improve-the-appearance-and-positioning-of-maps-data-labels-for-smaller-shapes 


Feedback: https://www.syncfusion.com/feedback/26006/provide-to-option-to-view-data-labels-clearly-at-the-maximum-zoom-level-even-for 


We will prioritize the features every release based on the demands and priority. So, this feature will be available in any of our releases. 


If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal.  

 

Regards, 

Lakshmi R. 

 


Marked as answer

LR Lakshmi Radha Krishnan Syncfusion Team October 1, 2021 10:11 AM UTC

Hi Tim,


We are glad to announce that our Essential Studio 2021 Volume 3 release v19.3.0.43 is rolled out and we have included the “Map tooltip hide duration customization” feature in it. It is available for download under the following link. 


Essential Studio 2021 Volume 3 Main Release v19.3.0.43 is available for download | Announcements Forums | Syncfusion


Code Snippet:


  late List<Model> _data;
late MapShapeSource _shapeSource;

@override
void initState() {
 
_data = <Model>[
   
const Model('Asia', '44,579,000 sq. km.'),
   
const Model('Africa', '30,370,000 sq. km.'),
   
const Model('Europe', '10,180,000 sq. km.'),
   
const Model('North America', '24,709,000 sq. km.'),
   
const Model('South America', '17,840,000 sq. km.'),
   
const Model('Australia', '8,600,000 sq. km.'),
  ];

 
_shapeSource = MapShapeSource.asset(
   
"assets/world_map.json",
    shapeDataField:
"continent",
    dataCount:
_data.length,
    primaryValueMapper: (int index) =>
_data[index].continent,
  );
 
super.initState();
}

@override
Widget build(BuildContext context) {
 
return Scaffold(
    body:
SfMaps(
      layers: [
        
MapShapeLayer(
          source:
_shapeSource,
          shapeTooltipBuilder: (BuildContext context, int index) {
           
return Padding(
              padding:
const EdgeInsets.all(7),
              child:
Text(
               
'Continent : ' +
                    
_data[index].continent +
                   
'\nArea : ' +
                   
_data[index].area,
              ),
            );
          },
          tooltipSettings:
const MapTooltipSettings(
            hideDelay: double.
infinity,
          ),
        ),
      ],
    ),
  );
}
 
 
class Model {
 
const Model(this.continent, this.area);

 
final String continent;
 
final String area;
}


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 


Regards,           

Lakshmi R. 


Loader.
Up arrow icon