> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/governed-dashboards/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/governed-dashboards/charts-gallery/charts/map-chart.md).
# 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 can use the tooltip by enabling it.
## Data Used
The following data was used to generate the given example:
| Name | Unemployment\_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**
{% hint style="info" %}
*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.*
{% endhint %}
### 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 2. For custom markers we can use Glyph Icons 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:
```java
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";
```
Leaflet Trip Type map with Glyph icon marker
Leaflet Trip Type map with Maki icons marker
## 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.
```javascript
sdk.getWidget(‘map1).m_geometrytype = “circle”
```
* Draw marker for other data points when Geometry type is circle.
```javascript
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.
```javascript
sdk.getWidget(‘map1’).m_circleindex = 21;
```
