Geo Map Charts
This chart widget allows users to create detailed maps by providing a set of metrics that define the geo locations to be displayed on the map.
Map Configuration
API Key
The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project.
Zoom Level
This property establishes the particular level of magnification for the geographic map. By adjusting this setting, users can control the extent to which they can view and focus on specific areas within the map, providing them with a more detailed and precise understanding of the geographic information displayed
Center Position
Determines the central point on the geographic map. This is where the map is centered, providing a focal point for reference.
Longitude
Set the longitude coordinate for the central location on the geographical map. This is where the map will be centered and focused on.
Latitude
Specify the latitude coordinate for the central location on the geographical map. This is where the map will be centered and focused on.
Show Charts
Use this toggle feature to show/hide the geo-nodes of the map.
Map Data
Option
Supply the JSON data that is needed in order to display the geographical map. This JSON content will be used for rendering the map and visualizing the geographic information. Sample data below-
{
"tooltip": {
"trigger": "item"
},
"animation": true,
"series": [
{
"name": "Population",
"type": "scatter",
"coordinateSystem": "gmap",
"itemStyle": {
"color": "#00c1de"
},
"data": [
{
"name": "Azerbaijan",
"value": [
47.395,
40.43,
8352021
]
},
{
"name": "Albania",
"value": [
20.068,
41.143,
3153731
]
},
{
"name": "Armenia",
"value": [
44.563,
40.534,
3017661
]
},
{
"name": "Bosnia and Herzegovina",
"value": [
17.786,
44.169,
3915238
]
},
{
"name": "Bulgaria",
"value": [
25.231,
42.761,
7744591
]
},
{
"name": "Cyprus",
"value": [
33.219,
35.043,
836321
]
},
{
"name": "Denmark",
"value": [
9.264,
56.058,
5416945
]
},
{
"name": "Ireland",
"value": [
-8.152,
53.177,
4143294
]
},
{
"name": "Estonia",
"value": [
25.793,
58.674,
1344312
]
},
{
"name": "Austria",
"value": [
14.912,
47.683,
8291979
]
},
{
"name": "Czech Republic",
"value": [
15.338,
49.743,
10191762
]
},
{
"name": "Finland",
"value": [
26.272,
64.504,
5246004
]
},
{
"name": "France",
"value": [
2.55,
46.565,
60990544
]
},
{
"name": "Georgia",
"value": [
43.518,
42.176,
4473409
]
},
{
"name": "Germany",
"value": [
9.851,
51.11,
82652369
]
},
{
"name": "Greece",
"value": [
21.766,
39.666,
11099737
]
},
{
"name": "Croatia",
"value": [
16.693,
45.723,
455149
]
},
{
"name": "Hungary",
"value": [
19.134,
47.07,
10086387
]
},
{
"name": "Iceland",
"value": [
-18.48,
64.764,
295732
]
},
{
"name": "Israel",
"value": [
34.851,
31.026,
6692037
]
},
{
"name": "Italy",
"value": [
12.8,
42.7,
5864636
]
},
{
"name": "Latvia",
"value": [
25.641,
56.858,
2301793
]
},
{
"name": "Belarus",
"value": [
28.047,
53.54,
9795287
]
},
{
"name": "Lithuania",
"value": [
23.897,
55.336,
3425077
]
},
{
"name": "Slovakia",
"value": [
19.491,
48.707,
5386995
]
},
{
"name": "Liechtenstein",
"value": [
9.555,
47.153,
34598
]
},
{
"name": "The former Yugoslav Republic of Macedonia",
"value": [
21.698,
41.6,
2033655
]
},
{
"name": "Malta",
"value": [
14.442,
35.89,
402617
]
},
{
"name": "Belgium",
"value": [
4.664,
50.643,
10398049
]
},
{
"name": "Faroe Islands",
"value": [
-6.864,
62.05,
48205
]
},
{
"name": "Andorra",
"value": [
1.576,
42.549,
73483
]
},
{
"name": "Luxembourg",
"value": [
6.088,
49.771,
456613
]
},
{
"name": "Monaco",
"value": [
7.412,
43.75,
325
]
},
{
"name": "Montenegro",
"value": [
19.254,
42.792,
607969
]
},
{
"name": "Netherlands",
"value": [
5.389,
52.077,
1632769
]
},
{
"name": "Norway",
"value": [
8.74,
61.152,
4638836
]
},
{
"name": "Poland",
"value": [
19.401,
52.125,
38195558
]
},
{
"name": "Portugal",
"value": [
-8.058,
40.309,
10528226
]
},
{
"name": "Romania",
"value": [
24.969,
45.844,
21627557
]
},
{
"name": "Republic of Moldova",
"value": [
28.599,
47.193,
3876661
]
},
{
"name": "Slovenia",
"value": [
14.827,
46.124,
1999425
]
},
{
"name": "Spain",
"value": [
-3.649,
40.227,
43397491
]
},
{
"name": "Sweden",
"value": [
15.27,
62.011,
9038049
]
},
{
"name": "Switzerland",
"value": [
7.908,
46.861,
7424389
]
},
{
"name": "Turkey",
"value": [
35.179,
39.061,
72969723
]
},
{
"name": "United Kingdom",
"value": [
-1.6,
53,
60244834
]
},
{
"name": "Ukraine",
"value": [
31.388,
49.016,
46917544
]
},
{
"name": "San Marino",
"value": [
12.46,
43.942,
30214
]
},
{
"name": "Serbia",
"value": [
20.806,
44.032,
9863026
]
},
{
"name": "Holy See (Vatican City)",
"value": [
12.451,
41.904,
783
]
},
{
"name": "Russia",
"value": [
96.689,
61.988,
143953092
]
}
],
"encode": {
"value": 2,
"lng": 0,
"lat": 1
}
}
]
}Below are the properties and their corresponding values within the JSON data.
tooltip -> trigger
This string indicates that when the user hovers the mouse over a location, the details will be shown as tooltip. Value - "item"
series -> name
Specify the title for the points to show when the mouse hovers on it.
series -> type
It is a type of data visualization that plots markers on a map using geographic coordinates. The distribution of markers can reveal patterns and density. Value - "scatter"
series -> coordinateSystem
Value - "gmap"
series -> itemStyle -> color
Set the hex color code for the geo nodes.
data -> name
Provide the string value(s) to label the geo nodes.
data -> value
Provide the latitude and longitude arrays for the nodes to be displayed on the map.
Interaction
Chart Event Handlers
Map Ready
This event is triggered when the map is loaded and ready for the view.
Zoom Level Change
This event is fired when the user increase or decreases the zoom level value.
Center Position Change
This event is fired when the user moves the center position of the map.
Event Handlers
Click
The 'Click' event is fired when user clicks on the map.
Layout
Hide
This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.
Last updated