Design Studio 1.6 SDK – Leaflet Maps for more mapping goodness
Change Log
- 06/01/2016 – WMS Layer Support!
- 01/15/2015 – Updated the download with included GeoJSON file type support in File dialog boxes. (Screenshot at bottom)
- 01/14/2015 – Updated the download to include all fixes and enhancements from 01/12/2015 – to 01/14/2015. Try the update!
- 01/13/2015 – Several bug fixes
- 01/13/2015 – YouTube Video showing component property editing added.
- 01/13/2015 – Marker Size Scale Support (Example at bottom of post)
- 01/12/2015 – Color Scale Support in Markers (Example at bottom of post)
- 01/12/2015 – Font Awesome, the iconic font and CSS toolkit support in markers.
- 01/08/2015 – Custom Marker Images added! (Example at bottom of blog post)
- 01/08/2015 – Markers, Cluster Markers, and Heat Layers added! (Examples at bottom of blog post)
- 01/08/2015 – First version now released and available to download!
- 01/07/2015 – Blog posted
Planned Enhancements
- Bubble Layers
- Multiple Data Source support. This doesn’t appear to be possible just yet in 1.6 SP0 since bindable properties for result sets do not appear to be working as expected.
Quick Video
Link to YouTube to view larger/full screen: Open Source Leaflet Maps in SAP Design Studio 1.6 SP0 – YouTube
New Year, new maps. 🙂
Multiple Base Tile Layer Support
Support for as many map tile overlays as you like, to allow your users to switch between them at run time. Example follows:
By default, two Open StreetMap base maps are configured (labeled Standard and Satellite). The ‘Active Base Layer’ property specifies which tile layer should be visible initially. In this case, it is the ‘Standard’ map tile set that happens to be the same as the standard SAP Design Studio Geo Map component. Also available, and selectable at runtime, is an Open StreetMap Satellite overlay.
Let’s see how easy it is to add a new one. We click the [+] button:
A pop-up comes up, with some fields for your map tile layer. But, we also have a ton of presets I’ve compiled already. I’ve added around 18 different map tile server configurations, however you can feel free to enter your own manual properties if you have a favorite tile server or one on your corporate intranet. I’ll pick an ESRI National Geographic tile set.
Next, I’ll rename the label to reflect the map layer, also we see all the map tile settings that were configured for you from the preset:
Now, if I simply close the details pop-up, and change the name of my active layer to ‘National Geographic’, we can see the results in the design-time canvas:
So at runtime, we can see how to switch simply by using the layer control by hovering over the layer icon to expand the choices, and selecting one of the three map tile layers available:
Pretty simple!
Map Overlays
Map tiles are cool and all, but we actually need to plot some data on them for them to be useful. Here’s an example of how.
First, we find the Overlays section under Layers, and again click the [+] button to create a new layer.
We now get all the layer details we can use:
By default, you can see in the canvas that a grey country level overlay has been added, but let’s look at all the properties and explain what they are for:
Simple Cosmetics:
- Layer Key – Like the base maps, this is the label that will appear in the layer menu at runtime that you can toggle on or off.
- Visible – Whether the layer is initially visible or not.
- Default Feature Color – This is the default fill color of the geographic feature when no data is mapped to it. In this case, light grey.
- Default Feature Border Color – This is the border color of each feature, in this case, a darker grey.
- Line Weight – The thickness of the feature border.
- Border Opacity – Controls how transparent/solid the border is.
- Fill Opacity – Controls how transparent/solid the feature color fill is.
Color Scale Measure and Color Scale:
- Color Scale Measure is a way to select your measure that you wish to plot to your map. I prefer to take a flattened data approach instead of tuple selections, so let me explain by binding this to some data. In this case it’s just country populations by year:
This data set has a single dimension in rows (Country) and a Key Figure/Measure structure in Columns. We are not limited to one element in rows or columns, however in this case it just makes sense. If we were to have something like ‘Product’ in columns, the flattening concept will concatenate the values together in columns (and rows) to maintain a 2-dimensional selection. So let’s illustrate with the Color Measure selector options:By default, I set Color Measure to be ‘By Position’ with a position of 0. So if we look at what this would translate to, it would be the ‘1960’ measure. If the columns change at runtime due to filtering etc, it will always look at whatever is in column 0. Sometimes this may be what you want.
If your dashboard is prone to change columns due to other data interactions and you ALWAYS want to select on 1960, you would select ‘By Name’ and set it to whatever intended column:
- Color Scale is how we apply coloring to the features based on the Color Scale Measure we have set.
- First we have ‘Scale Colors‘, which is a palette of colors to provide to the scale. The Options button contains tons of preset colors to switch to as you may have seen in many of the other components I’ve written. You can configure as many or few as you like.
- Next, we have ‘Scale Type‘. I provide three different D3 scale options here. Depending on how your data is set, you may prefer Quantile over Quantize scale. You can read about the differences here: Quantitative Scales · mbostock/d3 Wiki · GitHub
Quick visual difference between Quantize and Quantile (in this case, I think the winner is obvious):
I do want to quickly elaborate on Linear Scale though… Linear Scale gives some additional scale options, as well as linear color interpolation instead of the color ‘bucketing’ that is done with Quantile and Quantize. Below is an illustration of a polylinear scale going from red to white to green, where the range is set using Median * 2 or Mean * 2, the min and max, or manual. Again, depending on your numbers, one of these 4 options may yield better results. I’ve chosen the ‘Mean’ method here, which takes the mean of the values in 1960, and multiples by 2 to determine the max of the scale. I’ve also set ‘Clamp Scale’ on, that way values over mean * 2 are clamped to the green. Also you see I provide the 3 color interpolation options of RGB, HCL, and HSL here. You can read more on d3’s color interpolation here: Colors · mbostock/d3 Wiki · GitHub
- Tooltip Template
Rather than painting you into one particular type of tooltip, I decided just to give you an HTML template to work with. Below is the default, followed by the runtime result when clicking on a feature.
So how does this work? Depending on certain token string placeholders in your HTML, I’ll replace them either with feature properties, measure labels, or measure values. Here’s your cheat sheet:Token Definition {featurekey} Will replace with the feature property you’ve selected as your feature key {feature-property} Will replace with the feature property. For example, {feature-income_grp} will replace with the GeoJSON feature property value (illustrated in the pic above) {colormeasure-label} Replaces with the name of your selected color measure. In the above example, the phrase 1960. {colormeasure-value} Replaces with the value of your color measure. {measure-position-label-n} Replaces with the label of the measure at the position n. For example, measure-position-label-1 would select the label 1970. {measure-position-value-n} Replaces with the value of the measure at the position n. {measure-key-label-key} Replaces with the measure name based on measure key. {measure-key-value-key} Replaces with the measure value based on measure key. TODO: TODO: Perhaps include tokens for formatted values, as well.
- Map Types
Next, something I thought was pretty cool… How to change the map overlay out. I provide 3 options:
- By URL
You can simply link to a GeoJSON/TopoJSON map by HTTP URL. You can see that the default url has a {ds-maps} placeholder. This is just a placeholder that points to the default GeoJSON map that Design Studio comes with (world countries). I also have included preset links to all the canned maps I made for the Chroropleth maps. Example preset menu: - By File
You can also upload your own GeoJSON into your design studio application file repository. Below is an example of a GeoJSON file I made in this blog: Creating Custom GeoJSON maps in Design Studio 1.5 – Part 1 of 2 - Custom
You can also draw geographic feature directly in the property sheet. Below is a screenshot of it in action. There’s some limitations here and I’d still suggest drawing custom GeoJSON in a proper editor like QGIS or use http;//geojson.io – Also I’d not recommend using large custom GeoJSON and stick to small sizes.
- By URL
Initial Map Center and Zoom Level
And finally, we can set a map center and zoom level. Not only that, but if your map is re-rendered due to being hidden and shown, or being bookmarked, the map center and zoom level state is saved. This currently still is not possible in the out of box Geo Maps component.
Marker Layers
Simple Marker Layer
Cluster Layer:
Heat Layer
Font Awesome Icon Support and Measure-based Color Scale:
Marker Size Scale based on Measure:
Note, I even place largest markers at bottom so you they don’t hide smaller ones. 🙂
GeoJSON file type support in Local and BIP Mode file dialogs:
(Click to see better)
This version is nearly done and should be available for download in the usual spot (details here: SCN Design Studio 1.6 SDK Components (ver 3.0)) by tomorrow. Questions/Comments/Feedback always welcomed.
More SDK interest?
If you are an ASUG member, you may want to sign up to attend a webinar presentation on Design Studio and Lumira visualization extensions on Jan 26th. Details can be found here: ASUG.com – Events
awesome article Mike, very detailed!
Hi Mike,
Great Work 🙂
This component resolves many issues and limitations we have with the standard GeoMap.
Do you have any plans to make this compatible with Design Studio 1.5?
Thanks,
Kishore
No plans to support 1.5
great! 😎
Hi Mike,
Great job as usual. I have just downloaded it to use (finally I can use SDK custom data sources on my maps!).
Version installed: (using DS 1.6)
Just a comment:
When using map overlays, on following error appears when more button is clicked:
After clicking OK the map overlays properties window appears but the tooltip options you describe above (template) does not appear
Could be some sort of bug?
Thanks,
Alfons
Proper release will come today. the default layer overlay is wrong. For now just delete the default overlay and add a new one back.
EDIT: I took a second look at your screenshot, yes you are using an early version that "snuck in" when Karol re-bundled the components earlier. Yours is missing many options so I would suggest not using the version you have. I think Karol re-bundled overnight so you may have better luck with that one if you want to re-download, as it is most up to date from me.
Second item, I see that you've pasted in custom GeoJSON - Be very careful with the sizes there. The more recent version of this that I blogged on has 'By File' support where you can upload your GeoJSON (see image of more recent properties in blog). Design Studio cannot handle extremely large properties and if you paste in GeoJSON, it will become large very fast.
In either case, sit tight, I'll have the 'proper' release ready for mainstream usage before end of day. Thanks for taking a sneak peak!
Update - It's now available to download, FYI.
Hi Mike,
Some problems seems to remains
I have download latest 3.0 stable version available
SCN Community Free Extensions for Design Studio 3.0.0.201601081635 org.scn.community.sdk.feature.main.feature.group SCN Community Contributors
But now error appear just when clicking more button on new layer overlay
I fixed one big and introduced another 🙂 I've already fixed this one butni will have to rebundle the release. I will do this in the next few hours and post an update when ready. Sorry about that.
Update - Now fixed (for sure this time) and available to download.
Hi Mike,
Don't worry about. I have just downloaded it and seems to work fine. Some additional comments:
Question: I have tried to upload a custom json file (instead of copy and pasting the content) (Map Type -> By file), but when I click on the GeoJson file icon it opens a window that allows me to browse images (??). I am not able to change the file extension that requires to be search. It is a bug or am I doing something wrong?
Minor issue: Once the map type is assigned The initial map zoom level/center option does not show the map
Suggested Enhancements:
(1) This component is a great contribution to get rid of limitations of geo map out of the box component, but I miss the on_select event handler that allows to use the map as a selector on the standard component. Do you think that would be possible to implement this feature in the future?
(2) When no base maps are used it would be helpful to be able to set the color of map background
Thanks a lot, and congratulations for your well done work!
Hey Alfons,
Your file upload issue: Design Studio file dialog box will want to always default to image types (I cannot find a way to change this behavior) - Simply change to all file types and then find your geojson file.
1) I'll add an On Select Event, it's on my list of basic things to add.
2) Map Background with no base maps - Good idea, I'll see if this should be a property, or if it's a simple CSS rule that you can add.
Your minor issue re: base maps not showing - Are you behind a corporate firewall or not connected to the internet? I've added a low zoom level (only to level 4) 'Firewall-Friendly' base map support that you may want to try, to rule out internet connectivity issues. Let me know if those have the same problem.
Hi Mike,
With regards to upload GeoJson file issue: Effectively, I already selected the file by changing filter extension criteria to "all types" on the "Open Image" window but once file is uploaded it does not apper on the right side to be selected. The only way I have found to manage the issue is to rename the json file with an image extension. By this way it works fine
Thanks
Judging by your screenshot, you are running in BIP mode and not Local mode, this would explain to me the different behavior. I'll make a note of that, and while renaming the file is the workaround I'd probably also take as well, it seems to be maybe a file type masking limitation that we could encourage SAP to lift in a future release. I'll update the blog post with this workaround for others. I primarily work in Local Mode so many times I forget to test every property in BIP mode, so thanks for the feedback!!!
FYI - I figured out how to change the file dialog box's file type filter. Will add to next update.
Hello Mike,
Can you please let us know when do you tentative plan to release the version with "onselect" functionality ?
Thanks,
MD
Update: I've added 3 new types of overlays (Simple Markers, Clustered Markers, Heat Layer Markers)
Update: I've added Custom Image Markers.
Update: I've Font Awesome Icon Support and Measure-based Color Scale for Markers.
Update: I've added a measure-based Marker Size scale support for Markers.
Update: Added YouTube video (Open Source Leaflet Maps in SAP Design Studio 1.6 SP0 - YouTube)
[embed width="425" height="350"]https://www.youtube.com/embed/qMQ7F6uC3X0[/embed]
Updated the download to include all fixes and enhancements from 01/12/2015 - to 01/14/2015. Try the update!
Updated to include correct file type extensions when uploading custom GeoJSON files.
Hi Mike, thanks for sharing another awesome work!
Is it possible to figure a drill down (country > region > state > county) using this?
I figured that may be possible by using a custom GEOJSON file and manipulating the zoom, but I'm not certain of that will be possible, could you lend me some idea?
Hi Mike,
I have an analytic view from HANA added as a datasource, and I wanted to visualize my data with markers. I have 5 rows, with lat/lon, name of the city and population:
It works fine, but when I click on the marker and see the tooltip, I would like to see the name of the city, but it is not a measure (its under rows in the pic) and I dont know how to include it with the tooltip. It is not the {featurekey}. Can I choose it at all, and if the answer is yes, how?
EDIT: Nevermind, you are asking about dimension member values and not feature properties... I don't think I added that but if it will be useful, I can add that for you.
Yes that would be very useful, please let me know when you added that and what the syntax is.
Actually, I looked again, it's already there. Two patterns you can use:
This is awesome! Is there a way to get the dimension key as well? I tried a lot of options, no luck so far...
Edit: Just setting the dimension in the query to key and text and using dimension-key-text-0 did the trick. 🙂
Hi Mike,
awesome component and documentation, thank you so much! I've been playing around with it for the last couple of days and while very happy about the functionality, I noticed some strange behaviour here and there.
This includes the map being reloaded with a long delay if I change the datasource filters (>150 markers are changed). Is there an option available to trigger a manual reload of the map?
Edit: When I execute LEAFLETMAP_1.setWidth(LEAFLETMAP_1.getWidth()+1); after filtering, the refresh works...
I very much appreciate the configuration options of the component, they are quite open and universal. What's still missing in my opinion:
Allow selection of dimension attributes for lat and lon (as 0LATITUDE and 0LONGITUDE are attributes of 0CUSTOMER in BW), a workaround is to create formula variables that display the attributes as key figures (with replacement paths).
Allow "Color Scale Measure" to be a dimension in order to visualize distributions of markers with different dimensions across a map. E.g. visualize an ABC analysis of customers with A-Customers being Green, B yellow and C red. Is this possible in any way?
Another small issue I discovered is that the map is being shifted to the top-left if size is set to "auto" (using fixed sizes it works).
Thanks for your dedication,
Moritz
Hey Moritz,
Thank you for the in-depth feedback. It's always nice to hear when people are able to productively (if even only partially at times) use these components. Some responses follow:
Regarding visibility of dimension attributes, I'll have a look to see how much work it would take for me to include attributes into this component. I'm thinking if it is not too much work, I'll simply bring them in and give them a dimension treatment as if they were any other dimension since I usually just flatten the dataset anyway. Would this work for you?
For the marker coloring, actually yes in a prior older version of my map component, I did just this, where I used the color palette as an ordinal scale based on a dimension member instead of a measure value. So for sure this works, however for your use case how I did it in past would mean that the values are assigned in order (meaning 1st unique member gets color 1, second unique is color 2, and so on until out of colors, and then repeat to 1st color). Would this be ok for your use case or do you have a strong need for Customer ABC to always be red, for instance? In this case, it's almost conditional formatting at this point and would take more coding to facilitate the property dialogs to pull it off.
The sizing issue with auto is kind of an ongoing SDK thorn in many SDKer's paws, many times we have to implement a polling mechanism to watch for size changes and force redraws. Sometimes this polling solution makes it uglier/more sluggish than the problem it addresses. I can take a look to see if I can replicate and fix in a graceful way.
Hi Mike, thanks for the quick feedback!
Attribute dimensions can be handled just like any other dimension. I think the technical name has to be put-together though, because it might be possible to have the same attribute of different Infoobjects included.
This way, attribute values can also be displayed in the tooltip, right? So I could show the Customer Number (Dimension) and its adress (Attributes) without making the address a navigational attribute? 🙂
For the colors per measure:
The simple version proposed by you would be just fine and cover our current needs, as long as it is a unique color for each dimension (yes I am willing to create a huge color-palette for this 😉 ). It would bring us a huge step forward. Can I contribute towards this in any way?
What is bugging me is that my map does not get refreshed quickly when I change the DS filter (Crosstab component shows the applied filter for instance). I can trigger a manual refresh of the map by changing its width via scripting (LEAFLETMAP_1.setWidth(LEAFLETMAP_1.getWidth()+1);). Is the datasource-changed event maybe not received correctly by the map?
Cheers,
Moritz
Hello Mike,
As shown above in the screen shot for tooltip Template, it is displaying 2 measure values,whereas currently DS1.6 is supporting only a single measure display.Unable to figure out how to get more than 1 measure value in display.Tried using the Measure-position-label1 and measure-position-value1 in the tooltip,no luck either.
Secondly mouse over functionality is not working with the current features on the map as hovering around particular country should display values.Any insights on this.
Thanks and Regards,
Karthik Kumar C V
Hello Mark,
is there anyway i can get the source code of this Component? I want to tweak it a little bit.
Regards
Amr
Hi Amr,
I assume you mean Mike, I do not know a Mark. The source code can be found on the blog post linked at the bottom of this post.
lol, Sorry Mike, i must was distracted, Thanks for the reply.
I downloaded from here https://github.com/org-scn-design-studio-community/sdkpackage
I have to figure out how to extract this component separately, i want to work only on this.
Regards
Amr
Hello Mike,
thank you very much for this amazing component.
I'm having some issues with the tooltip display. I have one datasource with data of one country in three different levels, region, prefecture and commune with only one aggregated measure.
Region contains some prefectures and prefecture contains some communes.
As its displayed in the screenshot below
If I use the basic tooltip formula it displays always "NameOfField: undefined"
<strong><span>{featurekey}</span></strong><br/>
<ul>
<li>{colormeasure-label}: {colormeasure-value}</li>
</ul>
I tried removing all the levels and leaving only one dimension and it works, so it seems that is not aggregating the data.
So, I need to display data of the three layers but I cannot add more datasources to the component. Do you have any idea about how can I show that data? Thank you in advance.
Regards,
Guillermo
Hi Mike,
your blog was a great help to visualize in our company the account receivables per country for the management. Now they ask me if we could implement follow enhancement:
1. If you click on a country, show the account receivables as amount (this is already implemented now)
2. Somehow (for example per second click or somehow else) open a new panel with detailed values for the selected country.
Unfortunately I couldn´t find until now any possibility to solve the requirement. Do you have any ideas?
Thank you for Your help!
Regards
Zoltan
Hi Mike,
I have an issue while using Leaflet map in Design Studio 1.6 version.
I am using BEx as data source and have a dimension Store (0PLANT) and corresponding Latitude Longitude attributes enabled in Initial view as well along with 3 other measures as shown below.
Now, I am unable to assign them as the drop down button only shows the Primary Infoobject (dimension) not the navigational attributes (latitude and Longitude) of it in place of both Latitude and Longitude.
is there a step I am missing or any fix available ?
I would really appreciate your help in this as I am struggling to figure this out for past couple of days.
issue is resolved by creating formula variable in source BEx query to make Longitude and Latitude as measures instead of just attributes.
So, these objects appear in columns can be chosen by selecting the column type as measure and it would display Latitude and Longitude fields to chose which resolved the issue.
Thank you!
Regards,
Harish
Hi Mike,
may I know if the OnSelect() event and getSelectedValues() events are enabled for Leaflet maps ?
if yes, can you share the sample code or syntax please ?
Thanks,
Harish
Mike,
Amazing product, I like it very much.
I have a question: when I click at a marker on the official Geomap component, the map will show me the selected dimension member. For example, as I click, the marker shows "Las Vegas" or "Denver" which is in my "site_name" dimension. How do I write codes to show it on the leaflet map? I tried but mostly getting the string such as "DS_1.getDimensionName("Site_Name")" instead of the real location name.
In addition, is there a way to show the site_name directly on the map (instead of on tooltip?)
Thanks,
Leo
by using dimension-position-text-0 I am able to see the site_name in tooltips.
Still waiting for the OnSelect() event and getSelectedValues() events. With them this map will be perfect!
Hi
Is there any way one can change the default colours being used in the heat layer map as shown in one of your screen shots above
Thanks
Hi
It seems that when I am adding a filter to the heat map and want to filter based on a dimension it is not filtering on demand but by having to untick and tick the some key over layer to show the filtered data on the heat map.Is there a solution for this.
Hi Mike,
Thank you very much this component its really great!
Im trying to upload a GeoJSON file to the platform but its showing the following error:
You know where the upload limit its configure?
Regards,
JC