Inspired by Japan: Lumira Extensions for Maps and QRcodes

Background

I have been interested in Geographical Information Systems GIS (or more simply maps) for a while now and originates from some time I spent in Japan. One of the first things we had to do during our stay there was to try and find a place to live. Although I was totally lost in translation, one thing about finding my way around seemed weird. There were no street names where I was looking to live and I thought it must be an Interesting first day for a Japanese postman. However the people around me had no issues with this and did not rely on satnavs or other gadgets and it was just the way it’s always been. So I took up an interest in software for maps as a way to help me get around. Also on my first entry into Japan a funny looking barcode was stamped in my passport. This turned out to be a QRcode and I started to see them hanging around street corners and bus stops. Also I used them to claim discounts to a few items. As I always try and use SAP in any of my own projects, out of a general interest in SAP software, then I started to try and integrate maps and QRcodes with SAP.

A bit of Deju Vu (again) in that I have used this YouTube Video a few times now but I do enjoy watching it as the first section reminds me of a particular time and place.

Also in regards to the planned SCN move away from the Jive platform reminds me that my first blogs about maps and barcodes were broken by the move to the Jive platform. The broken blogs are here and here. The second blog link covers my first adventures in trying to use maps in SAP software. The blog is badly broken with missing images and formatting but one image that does remain is the Xcelsius map of Japan (the SDN points data related Xcelcius files I created back then can still be downloaded from the SCN Wiki). One image from the blog that no longer exists (and I do not have a copy of ) is one showing a map of Japan and a QRcode. That image was not created with SAP software but the open source GeoServer GIS software server.

So I set my own objective to recreate the concept of a map and a QR code with SAP Lumira. Although GeoServer makes an appearance in this blog as I have it running in the SAP HCP so still counts to me as using SAP systems 🙂 .

A reminder to self, at some point I must backup my own SCN content before the migration from the Jive platform by the end of the year...

A download link for all the extensions is available towards the end of the blog.

Screenshots of the Three Map and QRcode Lumira Extensions

1. Map of Japan by Prefecture with QRcodes

         

2. World Map of SDN Points with QRcodes

         

3. Leaflet Cluster Marker Extension with QRcodes

         

Further Details of the Map and QRcode Lumira Extensions

I tried two ways of implementing the extensions. One method was via using external libraries and using require.js and the other was to pack all the external JavaScript code inside the Lumira main extension file render.js

Main Services used for the extensions

1. Barcode Writer in Pure JavaScript (BWIPJS)- Both the stand alone JavaScript version based on the HTML5 canvas element and also the Node.js version running in the OpenShift PAAS (using OpenShifts free offering to run the node bwipjs app). I came across the BWIPJS as it is based on the Based on Barcode Writer in Pure PostScript which I integrated into SAP Device Types while I was in Japan and the basis of my broken blog I mentioned earleir.

  **The OpenShift Node.js app will be switched off at some point and the extensions based on this will stop generating the QRcodes. I will keep the service active for a while but it could be switched off at any time. As the node.js service can be run from anywhere then it can be easily replaced by running it elsewhere.

**The “World Map of SDN Points with QRcodes” extension is based on the standalone JavaScript version which is embedded into the extension and therefore will continue to be available.

2. GeoServer running in the SAPHCP (Neo) – used for the Map of Japan and a base map for a Leaflet.js extension.

  **The “Map of Japan by Prefecture” extension is based on a service running on the SAPHCP and is only a demo, so will stop working at some point. I will keep the service active for a while but it could be switched off at any time. Also SAP can stop the application at any time but do email me with notification that the application has stopped.

3. Leaflet.js open source mapping library
4. MapQuest Free open map based on OpenStreetMap data
5. D3.v3 I use version 3 of D3 for a very specific task in my map of Japan.

Details of the “Map of Japan by Prefecture” Extension

My first blog for an extension for Lumira was based on a choropleth map of Japan and can be found here and is part of the community collection of extensions http://scn.sap.com/docs/DOC-60683

I wanted to improve the map of Japan by allowing multiple ways to match the prefectures with the map data. By selecting the ISO codes, prefecture name or other details of any prefecture to match against the details of the map of Japan. I used a lookup table for this, it would be good to extend the Geo enrichment feature of Lumira, the only way I came across this before was a hack of a jar file so I kept my own lookup table for this method in my extension.

The map of Japan is generated by a JSONP call to my GeoServer running in the SAPHCP. I used JSONP to get around the CORS issue with standard JSON. I mentioned in my original vizpacker blog some clever ways to auto calculate some D3 parameters to auto zoom on selected map features. I could not work out the clever ways in D3V2 so I used the examples from D3V3 to auto calculate the zoom and focus of the map based on selected regions or prefectures of Japan. I use the CQL Feature of GeoServer that I know how to use this to only select the Prefectures of Japan based on user selection.

The QRcode is generated via an image from my own BWIPJS app running in the OpenShift PAAS. The data encoded is only the prefecture name and was a proof of concept that the image would be displayed via an external service in Lumira.

Example of zoom and focus of the map based on selection.

First two regions of Japan have been selected

         

Auto zoom when a third region of Japan is added

         

screen shot of multiple matches via attributes Kanji and ISOP_1 which is done via a lookup table in the code.

         

Screen shot above showing the possibility to matches via more than one attribute, e.g. Kanji and ISOP_1 shown above which is done via a lookup table in the code.

Details of the “World Map of SDN Points with QRcodes” Extension

Everyone loves SCN points 😛 and the same was true for points when the community was known as SDN.

Points used to mean prizes

http://scn.sap.com/people/mark.finnern/blog/2004/09/17/the-three-sdn-musketeers

Points used to mean T-Shirts then Food

http://scn.sap.com/community/sustainability/blog/2008/10/25/you-re-helping-the-un-feed-and-educate-children-simply-by-contributing-your-knowledge-and-experience-with-others-help-us-double-the-donation-from-sap

Before the migration to the SCN Jive platform then points for all contributors was available as an RSS service . This leads me back to that broken blog I linked to earlier in which I covered the process I went through to map the worldwide points using KML, via an ABAP program.(Then I used the same data to map it in Xcelcius and now Lumira and used it for the original Data Geek challenge, did I mention I like maps 🙂 ) .

So when Gordon Du passed Craig Chemil as the worldwide points leader on SCN I had the data to map it. Tip of the hat to Jürgen who leads the way in points today.

Now the QRcode in this map is created by embedding the BWIP-JS code inside the code of the Lumira extension. This way I avoid any require.js configuration and the code can execute completely within the extension. Also the QRcode is generated from the data source which in this example is the URL of the old SDN profile pages.

The screenshot below is of the QRcode for Gordon Du’s old profile page.

         

QRcode Scanned URL

         

Details of the “Leaflet Cluster Marker Extension” with QRcodes

The next extension is using the open source mapping library Leaflet.js with the free MapQuest maps which use the OpenStreetMap data.

MapQuest maps come with the following “Terms of Use”

http://developer.mapquest.com/en_GB/web/info/terms-of-use;jsessionid=F6rkp8Iqu3Di2XdNN90p.1

In my example map for the Leaflet cluster markers I have mapped SCN events. This was via an SQL Anywhere procedure to search SCN event tags (inside tracks, codejams, innojams and teched) via a GeoNames.org service to convert RSS to GeoRSS (similar SQL Anywhere procedures that I used to try and improve my SCN relevance here). The GeoNames process did  place the events in a general location and is not accurate (and sometimes in the wrong country). However I will pick on the Rome Inside Track as a way to thank Sergio Ferrari who was involved with that event in Rome. As Sergio was very helpful and open to ideas and provided great feedback to my QRcode and mapping ideas back when I was first getting into the process to integrate them with SAP.

Screen shot of the Leaflet Marker in Rome for the Inside Track held this year. The link is for a blog about the event.

         

When I scan the QRcode with my Android mobile and open the URL in the mobile browser I can get directions to Rome. Maybe one day I should have road trip, but maybe better flying 🙂 to Rome.

         

Also there is a Geoserver Base Map in the extension. Which I have styled using GeoServer tools based on SDN points. The same GeoServer running in the SAPHCP.

         

I can use the same Leaflet cluster map with the crime data that I blogged about here with SAP HANA in the SAPHCP

I used this data to enter the last Data Geek challenge and looked at bike crime in Oxford, that blog link is here. So I chose to look at the Oxford bike crime data with the Leaflet cluster map.

         

I installed another map service on my phone which was the Nokia “Here” application for Android. (Unfortunately I could not get the MapQuest navigation app to work on my phone.)

         

Downloading and Using the Extensions

The extensions can be downloaded by following this link.

Setup instructions follow later but first.

A thank you to Tammy Powlas. Tammy kindly agreed to test my extensions and the tests were successful. I really appreciate the time she took to help me out with my request. As version 1.23  was lets say fussy and it appears to have changed certain settings that are not clear to me for any extension not just mine (and no doubt 1.24 will be out soon with further changes). My extensions worked on my computer but I wanted further confirmation that they worked on other Lumira installations. Tammy confirmed that they worked on her Lumira 1.23 version. Again, thank you Tammy.

A thank you to Manfred Schwarz whose document covered how to use require.js with Lumira for an extension using datamaps and topojson. I used Manfred’s require.js setup method in two of the three extensions for this blog. Thanks to Manfred for sharing the information as it has enabled me to try out ideas for extensions with external JavaScritpt libraries. I have made some alterations to the require.js configuration so that all the external libraries used in my extensions are located in one directory. This change also enables me to load the extensions in both Lumira and the test example web page without altering the code. As I set up require.js to look in two places to find the external libraries. As per the above I based it on Manfred’s document but any issues or implementation mistakes are mine.

Another SCN source that I took some inspiration from was Dong Pan’s blog about using vizpacker via the SAP WEB IDE. Although the example was good in using the IDE and I did succeed in using the vizpacker plugin via that method, it was one line in the code that caught my eye. In the example Dong setup the container using a “<p>” element reference. The statements in the source code and examples up to that point had led me to believe only DIV or SVG was a supported initial container setup. I have found great examples on the SCN in regards to how to do things but no official guide about container definitions or even an official SAP guideline for using require.js. So now I use canvas elements and add DIV id’s and it all works with Lumira versions 1.20/1 and 1.23. Future releases of SAP Lumira may change support for containers or it could be something I have missed in the documentation. Also I personally do very little work apart from setting up the data elements in vizpacker. As I find vizpacker frustrating in deleting my work if I click the wrong icon. So I do all my changes outside the vizpacker with the example web page created by the desktop vizpacker utility.

Disclaimer

It is out of my general interest in maps and barcodes I am choosing to share my extensions. Also that Lumira is my personal copy and the extensions are not meant to be finished products. They may or may not have bugs/issues. However I am more than happy to answer or help in my own spare time with any issues that may occur. Although only install if you are happy to experiment with them. The extensions can be uninstalled easily and they do come with the same “use at your own risk” statement as the extensions available at the SCN Document here..

Pre-Req Lumira Setup

From version 1.23 of Lumira I have had some issues with caching and Lumira failing to recognise updates to extensions. So I would suggest the following settings in SAPLumira.ini located in the Desktop folder of Lumira. The two parameters below allow access to the “dev tools” and disable cache. I found the cache particularly an issue with version 1.23 and do not recall such persistence of extensions and refusing to accept updates in any previous version. Disabling the cache fixed the issue for me and the debug setting allows access to the developer console.

-Dhilo.cef.frame.debug=true

-Dhilo.cef.cache.enabled=false

Network settings for Lumira

I have only a free personal version of Lumira which is connected directly to the internet and no proxy involved. There appears to be inconsistent experience with the network settings in version 1.23, as per the comments in this blog about 1.23

I use “No Proxy” in the File -> Preferences -> Network menu options. Also I use the two settings in the ini file mentioned above.

Install

Extract the zip file which contains all 3 extensions into the Lumira extensions directory with “Administrator” rights. Or extract the zip file to a temporary location and copy the files into the extensions directory via windows explorer.

After the zip file extraction or copy the following directory

C:\Program Files\SAP Lumira\Desktop\extensionsshould contain the following layout.

C:\Program Files\SAP Lumira\Desktop\extensions\bundles

C:\Program Files\SAP Lumira\Desktop\extensions\examples

C:\Program Files\SAP Lumira\Desktop\extensions\features

change to the bundles directory the following two folders should be available.

C:\Program Files\SAP Lumira\Desktop\extensions\bundles\viz

C:\Program Files\SAP Lumira\Desktop\extensions\bundles\vizlib

The main code for my three extensions can be found in the following directories.

Map of Japan by Prefecture with QRcodes

C:\Program Files\SAP Lumira\Desktop\extensions\bundles\viz\ext\japanqrcode

World Map of SDN Points with QRcodes

C:\Program Files\SAP Lumira\Desktop\extensions\bundles\viz\ext\worldmapqrcode

Leaflet Cluster Marker Extension with QRcodes

C:\Program Files\SAP Lumira\Desktop\extensions\bundles\viz\ext\slippymap

It is important that the directory structure is as above so the extensions can find the external libraries. The root install directory may differ “C:\Program Files\SAP Lumira\” but from that point on it must match the above. There are 3 Lumira documents (lums type files) that come with the download and I used these to create the screenshots above for the detail of each extension. There is a README document in the download with more details.

Service Status

The extensions rely on some services provided by free services in the cloud.

A world map of SDN points below. If there is no map then my GeoServer in the SAPHCP is not running.

Below is a QRcode image from my BWIPJS node app running in the OpenShift service. If no image is below then the application has stopped.

Changes to Other Extensions which rely on Require.js

I did find I was unable to switch custom extensions which rely on require.js in one Lumira session. If I quit Lumira and restarted and loaded the relevant extension first, it would work. The other extensions I had tried used an external library called async.js. To get around the issue for my setup I copied the async library to my vizlib directory and added a second location to the async config setup in the other extensions. As per the details below. However it is my adaption to get the code to load in Lumira and there are other issues with these extensions in 1.23 as detailed in the comments for the following blogs.

1. Change to Julien’s Google Maps extension require config code

‘com_costinggeek_googlemaps-async’: [‘sap/bi/bundles/com/costinggeek/googlemaps/com_costinggeek_googlemaps-src/js/async’, ‘async’ ],

2. Change to Mustafa’s Google Heatmaps extension require config code

async: [‘../sap/bi/bundles/sap/viz/ext/googlemapsheatmap/async’, ‘async’ ],

Uninstall my extensions

Stop Lumira and delete the following directories.

C:\Program Files\SAP Lumira\Desktop\extensions\bundles\viz\ext\japanqrcode

C:\Program Files\SAP Lumira\Desktop\extensions\bundles\viz\ext\worldmapqrcode

C:\Program Files\SAP Lumira\Desktop\extensions\bundles\viz\ext\slippymap

Once Lumira restarts the extensions will no longer be available.

.