Skip to Content

SAP Design Studio SDK – Choropleth Maps Refined, Part 3

Since I last talked about Maps, in my free time I’ve taken some effort to refine the component.  You can read about the basics in Part 2 here:

Part 2:

Design Studio SDK (1.3/1.4) – Open Source Maps (Part 2) Choropleth Maps

What’s New?

The focus I placed was on stability, usability, quality, and ease of use for the designer.  Still much room for improvement so I’m not done making it better yet!

  • Additional Property Sheet has new streamlined look and About section.  This property sheet is shared between many of my new visual components for a consistent look & feel.
  • Map Drag and Zoom
  • Better Legend and Tooltip formatting options
  • Better Tooltips
  • More Map Projection options
  • Many UX/UI/Stability Fixes
  • Map Labels dynamically hide when region is too cramped.  Configurable via a threshold parameter.
  • Corrected a few canned maps that had non-Latin characters encoded.  Will spend more time cleaning up any I missed and adding more maps.  Maybe someone would like to help add some more?  🙂 Design Studio SDK: How to create home-made map files for Choropleth Maps

What’s New for SDK Developers?

  • Additional Property Sheet overhauled to be self-rendering based on component config.
  • Choropleth Map Component (among other visualization components) now built on same base component class which cuts down on code time and maintenance.  Supports self-rendering Additional Property Sheet.

Screenshots of Choropleth Maps and Additional Property Sheet at Design Time.

New ‘About’ section that will show up in most future SDK components in the SCN Community Pack:


Example of Cosmetics Category showing navigation and sub-category organization, with overflow menu showing on the right.


Video of Choropleth Map component in action (Best viewed full screen at 1080):

This is available NOW from the SCN Design Studio SDK Development Community link.

Questions/Comments/Feedback always welcome.


You must be Logged on to comment or reply to a post.
  • Hi Michael,

    nice work. Did you know, that SAP already provides a framework for geo maps including choropleth maps? Unfortunately it's one of the best kept secrets. It's called Visual Business and part of UI5. It's a really great peace of work the guys did and I very much love what you can do with it. In my opinion its worth giving it a try 🙂

    Regards, Marcel

  • Hi Michael,

    it seems really nice work. I just played around with the add-on and it looks very good.

    I have a couple of questions though:

    - I tried it with a BW datasource and the world countires, and it was only working if I had more than one measure. Is this normal?

    - I tried to put in a trimmed down version of the world countries json into the "Mapping"-->"Map Data"-->"Map Contents" field. It is modifiable but, how do I tell the add-on to use it for the map? Or is it just possible via a change of the add-on. I couldn't find anything in your blogs.

    Thanks for your great work and have a nice weekend.


    • Hey Phillip, thank you for the feedback.

      Re: the BW datasource, one measure should be supported, but perhaps I have a bug.  I will check on this as all my testing probably had 2 or more measures.

      Re: trimmed down Map Version, whatever you put in Map Contents text field, yes I just confirmed this is a bug accidentally introduced where it's not pushing any changes back to your map.  Good news is I've fixed it and I'm uploading a corrected version now. 

      Below is an example from my blog post where I've removed Florida from the US map:


      • Hi Michael,

        Thanks for sharing this article, it is too good. I have tried to use this map with BEX query with single measure. Basically I was trying display state wise HC CY (Head Count measure). I got the correct output, but when I click on state I got the error.

        On select section of map is empty. Any idea why I get this error?

        Please refer below screenshot of error.US State Map.png



        US State Map.png
  • Hi Michael,

    I've been trying this out (great work!), but i've had some problems with onselect on the ipad, is there anyway to turn off the map drag?



          • Hi again Michael,

            I set up a filter based on the onselect of a region on the map, it works as expected in desktop and android, but on the ipad it does not work at all.

            Any idea on what might be causing this?

          • Interesting that it works on Android but not iPad, hmm.

            Are you testing using the QRCode testing method to view from iPad Safari vs BI Mobile app?  Just wondering if it's broken in both places, even though they are basically both just HTML5 pages, it may help.

            To be honest I did test to make sure the maps rendered on the iPad, but didn't test beyond that with the select BIAL script event.  My iPad is pretty old and it's very slow to do much on it.  I'll attempt to debug it but this one might take me longer to get back to you on.

          • The onselect filter does not work in either, but in the safari it does select each region with the corresponding tooltip, while on the BI mobile app it seems like its just a static image with no interaction whatsoever.

            I tried this with an ipad air.


          • The CSS class is "tooltip" which you can use CSS styles to format.  You can fully qualify your CSS rule with .Map .tooltip together.

            Hope this helps!

          • oh sorry, my message was pretty generic, i mean formatting values in the tooltip, for example no decimal places, is that possible trough the css?

          • Not that I know of - However I can pretty easily add a "Prefer formatted values" parameter in there to allow for using those coming from the Query Panel over the "raw" ones, if that helps.

          • Yes, that would be really helpfull!

            It's a bit strange when showing absolute values to have two decimal places, like 1456,00 persons.

            Thank you again Michael!

  • Hello mike,

    In one your videos you were able to generate a chart on clicking for a particular country or state.Well i tried to replicate the same but all i am getting with on select function is getselectedfeature property for map and unable to use get selected member function for the map.

    Any insights on this.

    It would be helpful if you can guide me through this with the on select function for the map.

    My Current code for On Select event on Choropleth Map is


    Thank you in advance


    Karthik C V

  • Hi Mike,

    I've been looking at a variety of your mapping components, and I actually have a requirement that is best met by a hybrid of 2 of your components! I basically need the functionality of the Choropleth map, but with the ability to display a custom GeoJson file overlay that is stored on the BI Platform (in the same way that your Leaflet Map does). I've tried customising the component myself, but must admit with no success!

    Have you any plans to update the Choropleth component to be able to read loaded GeoJson files, rather than having to cut and paste the GeoJSON file data into the component itself?



    • Hey Colin,

      You mean like how I do the GeoJSON in the Leaflet maps where it references a file, right?  Yes, I believe this would be a relatively straightforward change.  The storing GeoJSON as a property I never particularly liked however at the time, was the only SDK option.  And actually I thought of retrofitting this into the Choropleth Maps after the Leaflet ones but never got around to it.  Since you also mentioned this usage case, I can prioritize it to the nearer to top of the pile 🙂

      PS - Could you log it as an enhancement request issue on GitHub so I do not forget?  it's a habit of mine to forget SCN comments.

      Issues · org-scn-design-studio-community/sdkpackage · GitHub

      • Hi Mike,

        That would be fantastic  - therefore giving the ability to maintain the map without having to go into Design Studio and re-saving every time.



      • Hi Mike,

        Have you had a chance to look at this enhancement yet? I'm getting to a stage on a project where potentially this change would be very useful..!

        Alternatively, if you could point me to the relevant part of the code for the leaflet map that this loading capability has been implemented, I could have another go at trying to enhance the choropleth component myself.

        Kind Regards,


  • Hi Mike,

    I'm currently using the Choropleth Map (SDK Components 3.0) together with BEx queries as data sources. I want to switch dynamically the measure for the map. But the method CHOROPLETH_1.setMeasure("00O2THVII5PGHRU9P89KL7FC1") is not working. I tried the measure ID and the description. Is there some known bug?

    I switched successful the measures with an BYOD data source but not with BEx queries.

    Best Regards



  • Hello Mike,

    I am using Choroplet Map 2.0, and having issue with the map tooltip. Since i am using bex as datasource, measures has both names and technical names. The problem ise, tooltip shows the same measure value twice, both for name and technical id of the measure.

    Do you know if there is a way to overcome this issue?




  • Hi Experts,

    I have used the Choropleth Extension and deployed on a BO Server. However we are not able to view the map if you open it from the BI Launchpad? Also the tooltip is displaying the Technical Names for the measures. Is there a way to only show the non-technical names for the measures.


    • Hi Lenon,

      I am having the same problem with measure id. For your viewing map on platform problem, please make sure you installed extensions to BI Platform (from Tools -> Platform extensions) as well and restart Analysis services.