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 :smile: .
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
Map of Japan by Prefecture with QRcodes
World Map of SDN Points with QRcodes
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
- 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.
- 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.
- Leaflet.js open source mapping library
- MapQuest Free open map based on OpenStreetMap data
- 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 :razz: and the same was true for points when the community was known as SDN.
Points used to mean prizes
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-c...
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 :smile: ) .
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 jrgen.lins 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.
.
- SAP Managed Tags:
