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

    Pictured below: Buildings in a local shopping center.
    

  • 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.

    
    Another pic of the ‘Source’ tab:

    

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

Custom Image Marker

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