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:

/wp-content/uploads/2015/03/part3maps1_668269.png

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

/wp-content/uploads/2015/03/part3maps2_668300.png

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.

Enjoy!

To report this post you need to login first.

26 Comments

You must be Logged on to comment or reply to a post.

  1. Marcel Jantz

    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

    (0) 
  2. Philipp Schornberg

    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.

    Philipp

    (0) 
    1. Mike Howles Post author

      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:

      /wp-content/uploads/2015/03/fix_669050.png

      (0) 
      1. Hari Ravada

        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

        Regards,

        Hari

        (0) 
  3. Joao Cavaco

    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?

    Thanks,

    João

    (0) 
          1. Joao Cavaco

            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?

            (0) 
            1. Mike Howles Post author

              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.

              (0) 
              1. Joao Cavaco

                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.

                Thanks!

                (0) 
                  1. Mike Howles Post author

                    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!

                    (0) 
                    1. Joao Cavaco

                      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?

                      (0) 
                      1. Mike Howles Post author

                        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.

                        (0) 
                        1. Joao Cavaco

                          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!

                          (0) 
  4. karthik kumar

    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

    DS_1.setFilter(“dimensionname”,chart_1.getSelectedMember(“dimensionname”));

    Thank you in advance

    Regards

    Karthik C V

    (0) 
  5. Colin Terry

    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?

    Regards,

    Colin

    (0) 
    1. Mike Howles Post author

      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

      (0) 
      1. Colin Terry

        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.

        Cheers,

        Colin

        (0) 
      2. Colin Terry

        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,

        Colin

        (0) 

Leave a Reply