In some situations, it is necessary to represent geographic locations such as countries, cities, etc.
As from GeneXus 17 upgrade 4, this data can be represented on maps in the QueryViewer control.
For example, look at the image below. It represents the total number of SARS-CoV-2 (Covid-19) cases per million people in each country.
In this case, a Choropleth type map is used.
Now, look at this other map below. It represents the total number of deaths per million in each country.
In this case, the data is represented in a Bubble type map.
How is it done with GeneXus?
For a query to be displayed on a map, you need to define in the Query object an attribute containing the ISO 3166-1 or ISO 3166-2 codes, depending on the geographic entities to be represented. For this attribute, its Type property must be set to Axis.
In addition, it is necessary to add another attribute with the numerical data related to the geographic entity. In this case, it is CountryCasesPerMillion. The Type property of the Query element must be set to Datum.
Additionally, you can choose the color of the data represented on the map. You can do this by setting the ForeColor property of the attribute whose type is Datum. Note that if no color is selected, a default color will be assigned.
Take a look at the following example. To represent specific colors for the different data values on the map, you can configure them in the Conditional styles property.
In this case, the Conditional styles property is configured as follows:
You can define this type of output using the QueryViewer control. To this end, the QueryViewer control (inserted in a web form) must have the Type property set to Map.
In the Map Type property, select the map you want to use (Choropleth or Bubble).
In the Region property, set the type of map in which you want to represent the data (World, Continent, or Country).
Note that if you select the Country property or Continent property, the maps available for each option will be displayed.
The map type can also be configured programmatically through the enumerated domains QueryViewerMapType, QueryViewerCountry, QueryViewerRegion, and QueryViewerContinent.
Take a look at the following example. To represent the total vaccinated population per department per country, with a combo box to select the country and the type of map, you need to set it as follows:
In this case, the enumerated domains used were QueryViewerRegion (to set the Region property to Country), QueryViewerCountry (to set the Country property to an initial value), and QueryViewerMapType (to change the MapType setting in Choropleth and Bubble).
Look at the following image. Changing the combo box options to another country and another type of map:
1. The library used is ECharts.
2. GeneXus provides the following country maps:
- Antigua and Barbuda
- Bosnia and Herzegovina
- British Virgin Islands
- Burkina Faso
- Cape Verde
- Central African Republic
- Cook Islands
- Costa Rica
- Czech Republic
- Democratic Republic of the Congo
- Dominican Republic
- East Timor
- El Salvador
- Equatorial Guinea
- Faroe Islands
- Guinea Bissau
- Ivory Coast
- Marshall Islands
- New Zealand
- North Korea
- North Macedonia
- Papua New Guinea
- Puerto Rico
- Republic of the Congo
- Saint Kitts and Nevis
- Saint Lucia
- Saint Vincent and the Grenadines
- San Marino
- Sao Tome and Principe
- Saudi Arabia
- Sierra Leone
- Solomon Islands
- South Africa
- South Korea
- South Sudan
- Sri Lanka
- The Bahamas
- Trinidad and Tobago
- United Arab Emirates
- United Kingdom
- United States of America
- Vatican City
- Western Sahara
3. The following continent maps are available:
- North America
- South America.
In addition, the World map is offered.
4. Please note that regardless of the list of countries provided by GeneXus, only the following maps are supported with their ISO 3166-2 codes including their main territorial divisions:
- United States of America
This means that if you want to use a map that is not listed above, you must add the ISO 3166-2 codes in the relevant subdivisions of the map you want to use.
To do so, look for the js file of the required map; the country maps can be found in the following directory: UserControls/QueryViewer/Echarts/countries. Next, look for the map by its corresponding ISO 3166-1 code; i.e. if you want to add the ISO 3166-2 codes of France, go to the following directory: UserControls/QueryViewer/Echarts/countries/fr-all.js.
In the fr-all.js file, inside the properties of each subdivision, add the "iso-code" property, as shown in the following example:
Note that you will only have to do this if the map of the country you want to represent is not included in the list supported by GeneXus. On the other hand, the continent maps and the World map include all the countries with their corresponding ISO 3166-1 codes.
This feature is available since GeneXus 17 upgrade 4.