SAPUI5 Choropleth Map Control with Live Example – Part 1
In this blog post, I’ll introduce a reusable choropleth map UI5 control that can be bind to a model.
A choropleth map is used to show proportional values, such as population density, on a map using shaded or patterned areas. It provides a visual tool for understanding variability of a given variable within a region. Choropleth maps are preferred form of map display when dealing with data that conforms to clearly defined areas, such as countries.
Here’s an example of UI5 choropleth map control bind to a model:
I decided to make a control that can be used for displaying country data on a world map. For that I needed some data. Getting geographic data can be sometimes difficult especially if it has to be open source. Luckily there are more and more places that work to get more data more easily available. Examples are Natural Earth which is built by collaborators and supported by NACIS (North American Cartographic Information Society), and Open Knowledge (http://data.okfn.org/ ). I use Open Knowledge’s world country boundary json and World Bank’s GNI (gross national income) per capita datasets in the example. I also use MapQuest’s tile service to display the background map.
For the UI5 part of the implementation, I am creating a custom control that handles the leaflet library. User only has to plugin the model to the control and define which fields contain the data that should be displayed. Implementation of the control can be found in github (link in the end of the post):
There’s two js/json files used in the example: countries.js contains the geoJson (multi)polygons for the world’s countries and GNIpercapita contains data about individual countries GNI. countries.js is used only by the control and user just needs to include it in the html page. GNIPerCapita is provided by the user and requirement is that the data contains a list of objects that have ISO3 country key in some field (this can be mapped with idField property) and a value (mapped with valueField property) that can be converted to a number using defined format. Format is hard-coded at the moment but could also be given using a metadata property or even callback function.
Here’s an example of the map
Integrating with model changes using UI5 Table
Getting the map to show was the first part but now let’s integrate the map with UI5 model changes. With a choropleth map, natural approach is to use table to modify the data so let’s do that next.
Integrating with the table actually requires almost no changes to the map control itself. We only have to bind the table to the model the map also uses and just refresh the map once there are changes. Even refreshing could probably be automated but I leave that as an exercise to the reader. You can find the code for integrating with the table in the end of the article. Here I show the output:
And after modifying the value for Russia (RUS) in the table:
Part 2 is available:
UI5 Choropleth Map Control with Live Examples – Part 2
kjokinen/ui5choroplethmap · GitHub
Thanks for reading!
I did some refactoring in the github code to make the control more easily reusable and also added readme instructions.
This is pretty awesome. Would you be against someone trying to port it as an extension to SAP Design Studio?
Thanks for the compliments. Yes, you (or someone else) can port it freely and use as you like. Only requirement is to link back with credit to this blog post or the githut page: kjokinen/ui5choroplethmap · GitHub
Thanks, Kimmo. I have this on my pile of things to try to do in November/December after this busy month. Thanks again for sharing!