Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
MustafaBensan
Active Contributor

Part II can be found here: Topic 7: Geo Maps Part II - Zoom, Zoom, Zoom!



Introduction

One of the exciting and long awaited new features introduced in Design Studio 1.5 is the Geo Map component.  After having tried it out I thought I'd share my experiences.  I must say that for a first version, I think it's pretty impressive in terms of capabilities and also quite easy to use.  It has certainly exceeded the standard mapping capabilities in Xcelsius.

Scenario

I'll be describing the Geo Map features in the context of a BW BEx example related to US airline on-time performance data including airport locations and statistics such as % Weather Delay and % Delayed Flights.

Configuration

The Geo Map component allows interactive maps to be included in an application, consisting of shapes and markers overlaid onto a base map.  I'll describe the process in terms of my scenario.  After designing the application, my workspace looks like this:



Standard Properties


The most important standard property is the Basemap URL.  The Geo Map component defaults to the open source OpenStreetMap tile provider as shown below.  You are free to use your own tile provider but I found OpenStreetMap quite sufficient for my purposes.  Other properties include the basemap credit and legend visibility.  You can also trigger interactivity based on the "On Select" event of the map.




Additional Properties:


This is the fun part!  In the additional properties you define the layers for your map.  There are 3 types of Geo Layers:


  • Shapes Layers for overlaying shapes based on GeoJSON files
  • Points Layers for overlaying markers for specific geo locations
  • Charts Layers for overlaying bubbles based on a specific measure


Each layer must be assigned a data source.  Data sources can be re-used across layers.  In my example, I managed with just two data sources as shown below:


The first data source includes a geo dimension with latitude and longitude attributes as well as measures.  It is used in Points layers and Charts layers.

Each data source must contain only one geo dimension in the rows section of the Initial View.  For Points and Charts layers, the geo dimension should ideally include the standard BW latitude and longitude attributes, otherwise they need to be defined as measures in the columns section of the Initial View.  In my example, I preferred to use the standard BW attributes as shown below:



The second data source is used for Shapes layers to assign US FIPS (Federal Information Processing Standards) state codes to the corresponding polygon representing the state in the GeoJSON file.  Longitude and latitude attributes are not required.



To illustrate the different use cases for the Geo Map features I have defined 5 different layers as follows:



1. US Airport Location Marker

This layer is of type Marker.  Therefore it requires latitude and longitude geo dimension attributes.  You will notice that there is no field to explicitly reference the geo dimension here because only one can be defined in the data source Initial View.  For this example, the geo dimension on data source DS_1 is the Origin Airport which will be plotted with a marker based on the longitude and latitude coordinates.  Finally, a marker colour must be selected.

2. US Airport Location Bubble

This layer is of type Chart.  At the moment, the only geo chart type available is a bubble chart.  The size of a bubble is proportional to the value of the selected measure, which in this case is the % Weather Delay.  The bubbles are centred on the geo location of the airport based on the assigned latitude and longitude indata source DS_1.  In this case a GeoJSON file is not specified because we just want to display bubbles at the geo locations without the need for superimposing them on shapes.  Therefore the Mapping Property and Mapping Type are not relevant either.



3. US State Bubble

This layer is also of type Chart, like the previous one.  An important difference however is that latitude and longitude is not referenced.  Instead, a custom GeoJSON file is specified to define shapes (polygons) that correspond to US states.  Each state polygon in the GeoJSON file includes properties, one of which can be linked via the Mapping Property and Mapping Type to support interactivity via the "On Select" event of the Geo Map component.  The dimension linked to the state shape is automatically derived from data source DS_2 since it includes only one geo dimension.


It is worth noting here that when the latitude and longitude are not specified, the bubble will be centred inside its corresponding shape, in this case the state.

4. US State Choropleth

This layer is of type Shape.  In the example, the specified GeoJSON file defines the US states (as before) with the corresponding data association via the Mapping Property and Mapping Type.  Additionally, in this case, the Start Color and End Color properties have been defined so that the resulting output is in the form of a choropleth map, with the colour gradient being based on the chosen measure, % Weather Delay from data source DS_2.



5. US State Analytic

This layer is the same as the previous one but a single colour is specified instead so that the output is in the form of an "analytic map" (like those in Xcelsius).  In this case it may be appropriate to hide the legend.  Since there is no colour gradient, the selected measure is arbitrary. 



Interactivity via Scripting


To demonstrate the different types of effects that can be achieved, I have included a configuration sidebar that allows the visibility of the basemap to be toggled and different combinations of layers to be selected, as shown below:



The "On Select" event script of the basemap visibility radio group has been defined as follows:



var baseMapVisibility = me.getSelectedValue();
if (baseMapVisibility == "showBasemap") {
GEO_MAP.setMapUrl(basemapURL);
}
else {GEO_MAP.setMapUrl("");}
















Here the setMapUrl() method shows the basemap by setting the map URL to the default URL (in this case OpenStreetMap), or hides the basemap by specifying a null URL.



The "On Select" event script of the layer selection checkbox group has been defined as follows to control the display of the layers:



var selectedMapLayers = me.getSelectedValues();
var allMapLayers = mapLayers.split(","); // Convert map layer string to array
// Hide all map layers
allMapLayers.forEach(function(mapLayerID, index) {
GEO_MAP.setLayerVisible(mapLayerID, false);
});
// Display selected map layers
selectedMapLayers.forEach(function(mapLayerID, index) {
  GEO_MAP.setLayerVisible(mapLayerID, true);
});















Furthermore, to demonstrate an example of drilling down to additional information based on selection of an area of the map, the script below displays a chart ranking the airports within the chosen state:



var selectedLayerID = GEO_MAP.getSelectedLayer();
var selectedState= GEO_MAP.getSelectedMember("ZOSTFIPS");
var selectedStateKey = selectedState.internalKey;
var selectedStateText = selectedState.text;
if (selectedLayerID == "US_STATE_BUBBLE" || selectedLayerID =="US_STATE_ANALYTIC" || selectedLayerID == "US_STATE_CHOROPLETH") {
  DS_1.setFilter("ZOSTFIPS", selectedStateKey);
  DS_1.sortByMeasure("006EIC2OSTY2YB663A5R7IE8Y", false);
  FIORIAPPHEADER_PAGE_2.setTitle(selectedStateText + " % Delayed Flights ranked by Airport");
  PAGEBOOK_GEOMAP.setSelectedPageByName("CHART_PAGE");
}













It is recommended to execute the getSelectedLayer() and getSelectedMember() methods together for best results.  In the above example, the member returned is the state key based on the layer's GeoJSON Mapping Property.



Custom GeoJSON


GeoJSON shape files are usually used to overlay regions.  They are readily available on the internet.  For this example, I obtained a US State file from the link GeoJSON and KML Data for the United States (gz_2010_us_040_00_500k.json).  Alternatively, they can be created from other sources such as Natural Earth using tools such as the following:



Like CSS files, GeoJSON files must be placed in the application repository folder to be accessible when developing in local mode.



Screenshots


The screenshots below illustrated the capabilities of the new Geo Map component:


The default tile provider OpenStreetMap is quite suitable for many use cases in my opinion.

Conclusion

Hopefully this blog has provided a useful overview of the main features available with the new Geo Map component.  I think it's a comprehensive addition to Design Studio that can meet the requirements of many typical use cases.  It's certainly a very solid debut for geo mapping.

I plan to follow this up with Part II, which will explore the use of layers for implementing drilldown functionality through different levels of maps.

In the meantime, I'd be interested in your thoughts about the Geo Map component and examples of use cases you'd like to address for your own business requirements.  Comments and questions are most welcome.

Part II: Topic 7: Geo Maps Part II - Zoom, Zoom, Zoom!

Blog Series Index:  Design Studio Innovation Series - Welcome

80 Comments
Labels in this area