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

 

 

 

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

  • No labels