Map Chart

The Map chart is used to position data in a geographical context. Multiple layers are included to cover various information. The users can specify which layer to be marked as an interactive layer as it is the only layer wherein items can be marked.

Best Situations to Use a Map chart

To display widely spread data or processes in the geographical setup.

Default Chart Image

Properties of the Map chart

Background

The user can change the background color of the chart, get the border for the chart, and change the border color. Get the reflection of the chart by enabling the shadow option and also change the color, increase or decrease the transparency of the shadow.

Export Options

The user can enable the 'Enable Context Menu’ from the preview section to download the reports in different formats. The user can change the heading and subheading of the downloaded charts and the name of the downloaded files from the Export context menu.

General

The user can change the height, width, top, and left values. The user can select the map type out of SVG and leaflet. The user can select a different map by selecting a continent name e.g., Asia. The user can also change the geometry type to marker, change the default color, rollover color, and give the color Range, etc. using the General Properties.

Subtitle

The user can enable the subtitle to display the second title. The user can change the Name, Font color, size, style for the subtitle.

Title

The user can change Title Name, Font color, size, style, etc.

Tooltip

The user can show the description of the series and get a tooltip by enabling it.

  • Open the Tooltip properties.

  • Click the Show Tool Tip icon.

  • The Tool Tip Configuration dialog box appears.

  • Select the Custom option using the checkbox.

  • Enter the description you want to display for the Tooltip.

  • Click the Save option.

  • The Customized tooltip appears for the Map chart.

Data Used

The following data was used to generate the given example:

NameUnemployment_rate

United Arab Emirates

4.3

Afghanistan

35

Albania

14.7

Armenia

18.5

Angola

2.9

Argentina

9.3

Austria

8.6

Australia

5.7

Azerbaijan

6.4

Bosnia and Herzegovina

25.4

Bangladesh

4.9

Belgium

8

Burkina Faso

9.1

Bulgaria

7.7

Burundi

6.6

Benin

3

Brunei Darussalam

6.9

Brazil

10.9

Bahamas

8.1

Bhutan

2.6

Botswana

20

Belarus

0.7

Belize

12.9

Canada

6.8

Democratic Republic of Congo

14.4

Central African Republic

8

Republic of Congo

11

Switzerland

40.6

Côte d'Ivoire

7.9

Chile

5.9

Cameroon

4.4

China

4.1

Colombia

8.9

Costa Rica

9.7

Cuba

3.3

Cyprus

12

Czech Republic

5.2

Germany

3.8

Djibouti

60

Denmark

5.8

Dominican Republic

14.4

Algeria

11.2

Ecuador

5.5

Estonia

6.3

Egypt

8.1

Western Sahara

4.5

Eritrea

5.5

Spain

18.63

Ethiopia

6.5

Falkland Islands

7.5

Fiji

8.6

France

9.9

Gabon

21

United Kingdom

4.8

Georgia

12

French Guiana

8.5

Ghana

3.6

Greenland

7.8

Gambia

9.5

Guinea

10.5

Equatorial Guinea

22.3

Guatemala

6.5

Greece

21.4

Guatemala

3.5

Guinea-Bissau

7.5

Guyana

9

Honduras

3.9

Croatia

18.2

Haiti

7.5

Hungary

4.3

Indonesia

5.7

Ireland

6.6

Israel

4.9

India

10

Iraq

16

Iran

11.212

Iceland

3

Italy

11.4

Jamaica

13.8

Jordan

11.1

Japan

3

Kenya

42

Kyrgyzstan

8

Cambodia

0.5

North Korea

25.6

South Korea

4.9

Kosovo

27.5

Kuwait

3

Kazakhstan

6.1

Lao People's Democratic Republic

7.7

Lebanon

10

Sri Lanka

4.2

Liberia

5.5

Lesotho

28.1

Lithuania

9.2

Luxembourg

6.5

Latvia

9.8

Libya

13

Morocco

5.5

Moldova

5.5

Montenegro

18.3

Madagascar

5.5

Macedonia

23.4

Mali

30

Myanmar/Burma

4.8

Mongolia

7.7

Mauritania

31

Malawi

5.5

Mexico

3.7

Malaysia

3.1

Mozambique

17

Namibia

28.1

New Caledonia

17.1

Niger

5.5

Nigeria

6.4

Nicaragua

6

Netherlands

5.7

Norway

4.8

Nepal

46

New Zealand

5.1

Oman

5.5

Panama

4.5

Peru

6.1

Papua New Guinea

1.9

Philippines

5.6

Poland

8.2

Pakistan

6.7

Puerto Rico

13.7

Palestinian Territories

5.5

Portugal

12.4

Paraguay

6.2

Qatar

0.4

Romania

6.4

Serbia

28.3

Rwanda

5.5

Saudi Arabia

11.5

Solomon Islands

5.5

Sudan

13.6

Sweden

6.1

Slovenia

12.6

Svalbard and Jan Mayen

5.5

Slovakia

8.8

Sierra Leone

5.5

Senegal

48

Somalia

6.6

Suriname

8.9

South Sudan

6.6

El Salvador

5.5

Syria

40

Swaziland

3.6

Chad

22.6

French Southern and Antarctic areas

6.6

Togo

6.6

Thailand

0.9

Tajikistan

2.4

Timor-Leste

7.7

Turkmenistan

3.5

Tunisia

15.2

Turkey

11.8

Trinidad and Tobago

3.7

Taiwan

3.86

Tanzania

7.7

Ukraine

9.9

Uganda

7.7

United States/Usa/United States of America

4.8

Uruguay

7.7

Uzbekistan

8

Venezuela

17

Vietnam

3.4

Vanuatu

4.6

Yemen

35

South Africa

26.5

Zambia

15

Zimbabwe

95

Use the Name column as Category field, and Unemployment-rate column as Series to plot data as shown in the given examples below:

Map Chart with SVG Type

Map Chart with Leaflet Type

Leaflet Auto Zoom

The user can use the Auto-zoom functionality to cover all the markers in the map component. This functionality is available in zoom-in map (Leaflet) based on number of markers and their placed positions so that all markers must be visible at that zoom-in level.

Leaflet Trip/Trail – Property - Line Type

The Line Type property is provided in the General tab for the Trip and Trail Geometry type Leaflet maps. The user can show Trip/ Trail map lines in any of the following three categories:

  1. Straight Line

  2. Dotted Line

  3. Dashed Line

Leaflet Trip Type Straight Line Map

Leaflet Trip Type with Dash Line Map

Leaflet Trip Type Dotted Line Map

Please Note:

  • At present, this feature has been provided to the Leaflet Trip/Trail Geometry Type maps only.

  • The width of line or dot is fixed for all the supported line types.

Leaflet support for the Glyph and Maki Marker Icons

The Glyph and Maki marker icons are supported in the Leaflet map type chart. The user needs to set m_svgicons variable to false using the SDK script. The following three types of icons are supported in the Leaflet map with the Trip Geometry Type:1. For Marker with custom icons we use Maki Icons https://labs.mapbox.com/maki-icons/​2. For custom markers we can use Glyph Icons https://getbootstrap.com/docs/3.3/components/#glyphicons​3. For custom markers we can also use font icons like bd-filter, bd-*Please Note:

  • Currently we provide support for Leaflet Trip Type Non SVG.

  • To achieve these icons, we have to set m_svgicons variable to false using the SDK script.

​A sample script with m_svgicons variable to false is given below:

sdk.getWidget( 'map2').m_drawTripPath = true; // for linesdk.getWidget( 'map2').m_svgicons = false;var comp = sdk.getWidget( 'map2' );comp.m_mapoptions.center = [44.91209,8.60492];comp.m_mapoptions.zoom =50;//for changing start & end markers & its colorcomp.m_markericon.icon="bd-car";comp.m_startcolor = "#21f110";comp.m_endcolor = "#12e925";//for changing path colorcomp.m_pathcolor = "#bf404d";//for changing path markers & its colorcomp.m_pathicon.icon= "bd-location";comp.m_pathicon.color="#d62728";​

Display Circle Data Points in the Leaflet charts

The Circle data points in Leaflet charts likely refer to markers that are displayed on the map in the shape of a circle. These markers can be used to indicate a specific location or set of coordinates on the map, and can be customized in terms of color, size, and other visual properties. BDB Designer draws circles considering the first data point as center, provided with an option to configure at which data point circle should render it.

Steps to Configure Circle Data Points & Show Marker through Script

  • Add a variable to control geometry type as circle.

sdk.getWidget(‘map1).m_geometrytype = “circle”

  • Draw marker for other data points when Geometry type is circle.

sdk.getWidget(‘map1’).m_showmarker = trueva

Configure Circle as a data point.

  • By default, it draws a circle considering the first point.

  • The user can control the circle data point through script.

sdk.getWidget(‘map1’).m_circleindex = 21;

Series Indicator

The Map chart supports Series Color based on the conditions.

  • Open the Dataset properties for the Map component.

  • Select a Series.

  • Open the Indicator tab.

  • Click the Add New Condition icon.

  • The Conditional Color dialog box opens for the selected series field.

  • Select one option out of Fixed Value Comparison or SVG.

  • Complete the required configuration.

  • Click the Create option.

  • Open the preview of the Map chart to view the conditional color for the set value.

PreviousLine ChartNextMito Plot

Last updated