Custom Map Label and Tooltip Location

1. Problem Description

In our daily use of maps, we usually encounter map labels, tooltip and other displays that do not meet our needs and need to be customized.

For example: in the process of using the map, we will find that many place names are displayed deviating from the position. At this time, we all need to use custom functions for regulation.

Taking Heilongjiang and Inner Mongolia as examples below, the adjusted effect is as follows, the label position is correct, and the custom format is used:

2. Implementation ideas

Use Use HTML to parse the content in the custom label format to customize the location of map labels and tooltip.

1. Create a new map

Create a new dashboard, drag in the map component, and selectChina under the map boundary of the map, as shown in the following figure:

2. Data preparation  

Create a new workbook, add a dataset ds1: SELECT * FROM map1, select the chart, select the chart attribute -Data, as shown in the figure below:

3. Basic style settings

Select the chart attribute-Style> Series, set the color type to Section Gradient, set the Theme Color to green, set the null color, set theBorder to blue, as shown in the following figure:

Select thechart attribute-Style> Legend, label selectionNumberformat.

4. Custom JS display label

Select chart attribute -Style> Label, selectCustom content, as shown in the figure below:

The JS code is as follows:

function() {
	var points = this.points;
	var total = '<div style="width:100%;height:100%;">';
	if (this.name == "Inner Mongolia Autonomous Region") {
		total += '<div align=center style="margin-top:-50px"><span style = "font-size:15px;color:' + FR.contentFormat(points[1].value) + '">' + this.name + '</div>';
	} else if (this.name == "Heilongjiang Province") {
		total += '<div align=center style="margin-top:-50px;"><span style = "font-size:15px;color:' + FR.contentFormat(points[1].value) + '">' +  this.name + '</div>';
	} else {
		total += '<div align=center ><span style = "font-size:15px;color:' + FR.contentFormat(points[1].value) + '">' + this.name + '</div>';
	}
	for (var i = 0, len = points.length - 2; i < len; i++) {
		total += ('<div  align=center>' + FR.contentFormat(points[i].value, '#0.00') + '</div>');
	}
	total += '</div>';
	return total;
}

div align=center style="margin-top When reading the name as Inner Mongolia Autonomous Region, we adjust the margin display position so that it does not display deviation

FR.contentFormat(value, '#.##%') Customize the numeric format, the following'#.##%' can be changed according to actual needs

this.pointsWhen this parameter is used in the map, it represents a different series of points on the same area

Other label custom formats can also refer to Chart Custom Label

5. Custom JS display tooltip 

Select chart attribute -Style> Tooltip, select Custom, as shown in the figure below：

The JS code is as follows:

function(){var
 points = this.points ;
var total = '<div style="width:100%;
background-color:#808080;color:white">';
total +='<div align=left 
style="font-size:16px">'+this.name+'</div>';
for(var i = 0, len = points.length-1; i < len; i++) 
{total +='<div align=left 
style="font-size:13px">●'+points[i].seriesName+':'+FR.contentFormat(points[i].value,
 '')+'</div>';} 
return total;}

Here is a simple loop, looping to display the parameters set by our front-end, and separate processing of the parameters, including controlling the font size and display format.

Other tooltip custom formats can also refer to Custom Tooltip

ClickPagination Preview, the effect is shown as follows:

Note: The mobile terminal is not suppoerted.

Please refer to the completed template: 

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\Map\Custom_map_label_and_tooltip_location.frm

Click to download:

Custom_map_label_and_tooltip_location.frm