Skip to end of metadata
Go to start of metadata

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






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();



// 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,
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 );





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 ) {
"onRegionClick "+ e.getParameter( "code" ) );};


function onRegionContextMenu( e ) {
"onRegionContextMenu: " + e.getParameter( "code" ) );};

  • No labels