Skip to Content
Author's profile photo Karol Kalisz

Design Studio SDK: A (first) try to get an Open Street Map into Design Studio

Based on the blog posted by Jeroen van der A on the inclusion of open source I have made a try to get some open street map into design studio. Here the first findings…

Does it work?

Yes, the good point is, this works. I had to switch back again to “DIV” based component model as the map API which I use (Modest Maps | Home) requires a div which is building a parent for the component. And I think SAPUI5 has some bug as the sizing of the HTML component is not working as expected – technically there is some DIV inbetween which has no real size.So for me a bit drawback in the API as the “DIV” api is a bit different and I cannot use the metadata property.

Show Case (Animated GIF – click to animate)


What is IN / What is not IN?

I had to learn that data SDK does not push yet attibutes of members to the client. And my test data source has the GOE-Attributes maintained as attributes on dimension CUSTOMER.

in release 1.4 lucky I have found a method which helps me to get the attributes in scripting. This means this component is not data based, but via “manual” scripting we can use it…

Here the code you need to use in order to dynamically add locations.

// insert madrit and SAP Headquaters in Walldorf
OSMAP_1.addLocation("MADRIT", "Madrit", "", 40.4, -3.7);
OSMAP_1.addLocation("WALLDORF", "SAP SE Headquaters", "SAP.jpg", 49.293417, 8.642384);

Example for 1.4 release:

var mem = CROSSTAB_1.getSelectedMember("0D_CUSTOMER");
// get attributes
var lat = mem.getAttributeMember("0LATITUDE");
var lon = mem.getAttributeMember("0LONGITUDE");
// calculate values
var latValue = lat.internalKey;
var lonValue = lon.internalKey;
// check if negative (as - is at the end and cannot be casted)
var latNegative = false;
var lonNegative = false;
if(latValue.indexOf("-")) {
  latValue = latValue.substring(0, latValue.length -1);
  latNegative = true;
if(lonValue.indexOf("-")) {
  lonValue = lonValue.substring(0, lonValue.length -1);
  lonNegative = true;
// convert to float after - is cut
var latValueFloat = Convert.stringToFloat(latValue);
var lonValueFloat = Convert.stringToFloat(lonValue);
// korrections as we have dummy data (only for the demo query)
latValueFloat = latValueFloat - 40;
lonValueFloat = lonValueFloat - 18;
// fix again the negative numbers
if(latNegative) {
  latValueFloat = latValueFloat * -1;
if(lonNegative) {
  lonValueFloat = lonValueFloat * -1;
// get the key and text from member
var key = mem.internalKey;
var tex = mem.text;
// add location (in 1.3 you need to make it in the startup of by hard coded coordinates)
OSMAP_1.addLocation(key, tex, key + ".jpg", latValueFloat, lonValueFloat);
// move map to the location

Available Properties

Property Name Description

the image which should be visible if value-picture not exist (must be maintained!)

Scripting Functions

Scripts Short Description
String getSelectedKey () returns the selected key

void addLocation (

  /**Element Key (must be unique)*/String elementKey,

  /**Element text*/String elementText,

  /**Image URL, if not set, no image*/String imageUrl,

  /**Latitude (horizontal)*/float latitude,

  /**Longitide (vertical)*/float longitude


adds location to the map which can be used later for navigation

void moveTo (

  /**key which schould be moved to*/String key)

moves map to the given location by its key
void panUp() moves the map up
void panDown() moves the map down
void panLeft() moves the map left
void panRight() moves the map right
void zoomIn()

zooms in

void zoomOut() zooms out


Event Short Description
onSelectionChanged Event triggered when selection has cahnged


First Step to get a map is done, as next I try to play around with different map layers and perhaps some value painting on the map (assuming SDK will be improved for the attributes)

Example Application

An Application with example can be downloaded at the BIAPP Repository (name SDK_OSMAP):


Source Code & Licensing

This component is for free use. It is under the Open Source Apache Version 2.0 License.

Important Maintenance Notice (… as I am SAP Employee)

The component is NOT delivered under SAP maintenance license.

You cannot claim any Support on this component from SAP!

The components are created on “private” basis – you can use them as is. I can modify, correct or improve – but there is no obligation to do it. Of course I will try to correct bugs or improve the component as long I can.

Have Fun!

for other components see: Karol’s SDK Components or Karol’s SDK Data Bound Components

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Howles
      Michael Howles

      Just a thought, related to the display attributes not being available to the SDK, we could mark them as navigational attributes to work around this to make this component databound-friendly.  Still would be some work though.

      Author's profile photo Ingo Hilgefort
      Ingo Hilgefort

      marking them as Navigational Attributes would have a huge performance impact on the overall cube.

      Author's profile photo Michael Howles
      Michael Howles

      Good point, perhaps we can see display attributes show up for SDK in future, but the BIAL scripting at least gives us a manual yet more performing path?

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Mike, I am just thinking if the event "beforeRender" would not solve this issue (see What's Coming in Design Studio 1.4 SDK).

      By this, I can try to bind this map to DS and always read the master data - and 1.4 gives also access to the attributes. I will try soon.

      Author's profile photo Cesar Buendia Rios
      Cesar Buendia Rios

      Hi Karol!

      I want to know if the OSMAP component runs on the SAP BI mobile application.

      Thanks in advance.

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Cesar,

      to be honest - I have not tested it on SAP BI Mobile. But the map is created as a normal SDK component and according to the SDK rules, all SDK components are working on SAP BI mobile exactly same way as on non-mobile. The SAP BI mobile is just hosting a frame for HTML5 rendering, and Design Studio is rendering same content as in standard browsers (there are some modifications for styling).

      I hope this answer helps, someone needs to try it out, I am quite sure it works.