Skip to Content
SAP Visual Business

UI5 Development: Analytical Choropleth Map

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" ) );};