SAP Visual Busienss provides a simple interface to include choropleth maps in UI5 applications.
See here for an overview: Analytical Choropleth Map
A description how to get and configure the L0.json file can be found here How to setup the content used in SAP Visual Business analytic choropleth map
Sample
Info: see the attachment for the full html.
With the API the application can work using the country iso codes only.
// some data
var oData = { regionProperties : [
{"code": "DE", "color": "rgba(184,225,245,1.0)", "tooltip":"Germany\r\nBIP: 3.577 Mrd. USD\r\nPopulation: 80,716 Mio" }, {"code": "FR", "color": "rgba(5,71,102,1.0)"}, {"code": "IT", "color": "rgba(0,125,192,1.0)"} ] };
// create model and set the data
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
jQuery.sap.require("sap.ui.vbm.AnalyticMap");
// set the path to the GeoJSON File. Please upload you geoJSON file to this location.
sap.ui.vbm.AnalyticMap.GeoJSONURL = "media/analyticmap/L0.json";
// create analytic map and bind to model
var oVBI = new sap.ui.vbm.AnalyticMap('vbi', { width : 1024,height: 512,
regions :{
path : "/regionProperties",
template: new sap.ui.vbm.Region(
{ code: "{code}",color: '{color}',tooltip: '{tooltip}',
click: onRegionClick, contextMenu: onRegionContextMenu
} )
},
regionClick : onRegionClick,
regionContextMenu : onRegionContextMenu
});
oVBI.setModel( oModel );
oVBI.placeAt("content");
Function: zoomToRegions
Visual Business zooms to an area where all countries are visible.
function onZoomToRegions() {
oVBI.zoomToRegions(['DE','IT','FR'] );
};
Events: regionClick + regionContextMenu
Visual Business sends two events to Javascript:
function onRegionClick( e ) {
alert( "onRegionClick "+ e.getParameter( "code" ) );};
function onRegionContextMenu( e ) {
alert( "onRegionContextMenu: " + e.getParameter( "code" ) );};