Skip to Content
Author's profile photo Former Member

Lumira Geoextension with datamaps.js and topojson.js

Hi to all,

Here is a instruction to use javascriptlibraries to enhance Lumira with more geovisualizations.

I uses the Lumira Tutorial by Matt Lloyd (http://scn.sap.com/community/lumira/blog/2014/02/19/how-to-add-a-d3-extension-for-sap-lumira)
to get to run and configure an own application.

I used the Vizpacker to generate a “dummy” Extension: VizPacker is located in your Lumira Installationfolder

under the following path

<Lumira installationfolder>\Desktop\utilities\VizPacker

I renamed the chart and plot area and changed the IDs (schwarzm.viz.ext.geoworld) and the Name.

/wp-content/uploads/2014/02/01_400054.png

I also renamed the Plot Area ID (schwarzm.viz.ext.module.geoworld) and its name

/wp-content/uploads/2014/02/02_400057.png

I closed the Title and Legend – they are not needed for my geovisualization – all that
is left now is the “Plot Area”

/wp-content/uploads/2014/02/03_400061.png

Pack it /wp-content/uploads/2014/02/04_400062.png
  and copy the zip file to the myExtension
Folder. If you don’t have a myExtension folder create one under

<Lumira installationfolder>\Desktop\

Extract the Lumira generated .zip file in the <Lumira installationfolder>\Desktop\myExtension

Folder. See screenshot below – the folder schwarzm.viz.ext.geoworld should be visible.

/wp-content/uploads/2014/02/05_400067.png

Replace the yellow highlighted “schwarzm” folder with the content of the attached zip file (Geodata_Lumira_extension.zip)

/wp-content/uploads/2014/02/06_400068.png

To be able to run the application copy the yellow highlighted “schwarzm” folder under

<Lumira installationfolder>\Desktop\myExtension\schwarzm.viz.ext.geoworld\bundles
to the folder

<Lumira installationfolder>\Desktop\Extension\bundles.

Then start Lumira and have a look at the result in combination with the attached data1.csv file in the zip Geodata_additional.zip.

The result should look like the following screen and you should be able to see the custom extension button

/wp-content/uploads/2014/02/07_400076.png

Be aware that you have to define the Source Region name, Latitude, Longitude and the Destination Plant, Latitude and Longitude

During development if you want to avoid restarting Lumira after each and every codechange you have to replace “example-schwarzm.viz.ext.geoworld.html” with the attached file (in the zip Geodata_additional.zip) with the Google Chrome Browser.

<Lumira installationfolder>\Desktop\myExtensions\schwarzm.viz.ext.geoworld\examples \example-schwarzm.viz.ext.geoworld.html

There you will see your changes immediately and development is a lot easier. You can take whatever editor you like to edit html and js files.

The Lumira developmentteam has chosen to use require.js. That is a Javascript library that enables to pack certain js libraries to a module and load them only when they are need. You are also able to use different versions of the same library. In the geoworld example I need d3 in Version 3 and not in the Lumira used Version 2. (Please see http://requirejs.org/ for more details. I put comments in the samples to explain how require.js is used). There are  asically three steps

  1. Configure your environment and tell require.js where the js libs are
  2. Define a module and define the dependencies for each and every js lib. Here also the libraries are returned and can be renamed for further usage
  3. Require certain modules and do your actual javascript coding

After you’ve setup the necessary require.js settings in the file <Lumira installationfolder>\Desktop\myExtensions\schwarzm.viz.ext.geoworld\bundles\schwarzm\viz\ext\geoworld \geoworld-bundle.js go ahead and include or check that your other needed js.libs are also in the folder

<Lumira installationfolder>\Desktop\myExtensions\schwarzm.viz.ext.geoworld\bundles\schwarzm\viz\ext\geoworld

/wp-content/uploads/2014/02/08_400077.png

Here are
the important points that I changed in geoworld-bundle.js

  • I emptied the render function – the reason is that the render function receives an svg canvas – but the Datamaps.js lib needs a HTML-Div Element.  herefore i implemented a new paint function and call this instead of the render function in the moduleFunc.render function from line 439. I also get the DIV Element in this function.
  • I copied the fdata part (line 20 to 34) – this part scans all used dimensions and concatenates those with the chars “ / “. Then it is easy to use the  resultset as a flat list.
  • In order to see my chart I had to minimize all the HTML layers that are in front of my div Line 39 to 42 Line 45 to 93 include the require.js frame. One important thing here is that you have to use different paths (Line 43 to 49) depending on where you execute the file (myExtension with Opera -> development – or extension with Lumira -> prod. If you are in extension add sap/bi/ to the single path statements. In line 49 and 50 I showed the difference
  • In Line 97 I call my “runtime” module. This is the part where my datamaps example comes in place. http://datamaps.github.io/#arcs
  • As i wrote before this component needs a DIV element. In line 99 I assign the passed divExtension to a local variable. Ideally there should be a chack if the nodetype is a DIV – I skipped the step
  • From Line 104 to 235 I used the datamaps example and inserted my fdata to the map to fullfil my mapping wishes
  • In Line 448 I changed the behavior of the moduleFunc.render function . Here I am trying to get the div with the chart canvas to use it in my paint function.
  • Line 465. The actual render function is not needed anymore. Therefore I call my paint function in line 468.
  • Line 532 to 580. I tried to have multiple dimension to avoid packing all needed information to one Dimensionfield (see next screenshot). But when I define more than two dimensions I have no chance to drag dimension into the third and following fields.

Perhabs someone can enlighten me in this issue.

/wp-content/uploads/2014/02/09_400078.png

One drawback of the solution is that no preview is stored, when I click on the save button and want to use it in the “Compose” area

/wp-content/uploads/2014/02/10_400079.png

That’s it.

I hope you enjoy it and perhabs you can use the require.js part when you need other javascript libraries than i did for your extensions !!

Best regards

Manfred

P.S.: Attachement of zips is not allowed. i put a .txt afterwards. Just remove the .txt and you should be fine

Assigned Tags

      19 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Howles
      Michael Howles

      Manfred,

      This is terrific content and explanation.  I've toyed with VizPacker only briefly but you're off and running with this!  I'm also glad to see you've cracked the requirejs issue, too!

      On a related note, have you considered porting this extension over to SAP Design Studio?  They are very similar in their extension API and the libraries they use (d3, for instance) - I'd imagine it would be very feasible to port this over to there!

      Great stuff, and thanks again for sharing!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Michael,

      Thanks for your comment. It took me some time, but now all other extension developers can take this hurdle a little bit faster πŸ˜‰

      I was considering it to use this extension with DS also, but i will wait for DS 1.3. I saw in the roadmap that there will be a feature to use existing Lumira extensions. Let's see if this works.

      I am also working on a gmaps plugin for DS and Lumira but i think i am not allowed to post it πŸ™

      Have a nice weekend

      Author's profile photo Michael Howles
      Michael Howles

      Manfred,

      Just popping back in to let you know that the groundwork you did here helped blaze a path to get TopoJSON working in Design Studio.  Thanks again.

      Author's profile photo Henry Banks
      Henry Banks

      Absolutely top class document!

      i'm sure i speak on behalf of the community in thanking you for taking the time to share your prototype with us.

      Cheers,
      H

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Henry,

      Thanks for your words !! Now that this require.js hurdle is taken - perhabs more and more development will arise in this area ?!? I'm trying to keep on working with the SDKs and report in SCN.

      Author's profile photo Former Member
      Former Member

      Thank you for this awesome contribution. i will look deeper into require.js.

      Do you think we can implement a fullscreen button into this or any other extension which will result in a real full-screen visualization?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Alper,

      Do you have just a fullscreen visualization in mind ?

      So that the div with the map or with another extension has the size of the Lumira window ? Without the navigation pane and the other areas ?

      Due to the fact that everything is html - except of the menu bar - the size of the divs is adjustable. So what needs to be done is painting a button with a onclikc handler in the exxtension. Then get to know each and every "disturbing" div and memorize their actual size - and then

      There should be a button then to revert this fullscreen modus πŸ˜‰

      I did not test it - there are just assumptions from my side. I will test that and come back to you - but i think it will take some time for me to test it.

      Best regards

      Author's profile photo Former Member
      Former Member

      yes i'm looking for a re-usable button coding that would maybe manipulate the existing maximize button just on the upper right corner of the visualization container.

      a proper way of doing this would be using  element.webkitRequestFullScreen();

      but while programmatically it thinks it is fullscreen while it is not.

      so like you suggested maybe getting a div and making it the size of window is the best option,

      Author's profile photo Former Member
      Former Member

      I look forward to seeing an example of this.
      With the power of HTML5 we should be able to get some interesting custom applications.

      //bijan

      Author's profile photo Robert Russell
      Robert Russell

      Hi Manfred,

      Thanks for sharing and great to see you got D3.v3 working, I am impressed.

      I now need to try it out now following your example.

      Cheers

      Robert

      Author's profile photo Former Member
      Former Member

      with a few tweaks i could have variable stroke width on arcs, removed popups, custom colorings on countries,

      very useful library with many use-cases. thanks again,

      Author's profile photo Kalyan Verma
      Kalyan Verma

      Hi Alper,

      Did you manage to get the tweaks in? If yes, can you share the Extension please?

      Thanks

      KV

      Author's profile photo Former Member
      Former Member

      Great post!  Thanks for sharing!  I'd like to add this extension and give it a shot, but the zip files do not contain anything but a text file.  I did remove the txt extension to no avail.  Any ideas?

      Author's profile photo Former Member
      Former Member

      You need to remove the .txt extension for the zip file within the main zip file. Then you can extract the folder for the extension inside of it. It should be called "schwarzm".

      Author's profile photo William MARCY
      William MARCY

      Impressive !

      Thanks for sharing.

      Author's profile photo Former Member
      Former Member

      Hi Manfred,

      I'm following your footsteps and debugging what you've done. Great job!

      I found something in geoworld-bundle.js.

      At line 49, there are references to /sap/bi/ which are not necessary ...

      As soon as I removed them, the examples.html worked in Chrome.

      I'll keep you posted of my progress. Thanks for sharing.

      Author's profile photo Robin Williams
      Robin Williams

      I see this extension listed on the SAP Analytics Extensions Directory site and that code has been updated for SAP Lumira 1.3, but I'm not seeing the zip (txt) file available for download. Β Is this extension still available?

      Author's profile photo Simon Iglesias
      Simon Iglesias

      Hi All ,

       

      Who can share this extension ? , I can't find the download link Β .

      Thanks and Rgds

      Simon

      Author's profile photo Chanchal Gupta
      Chanchal Gupta

      Hi

      This is great stuff. can we use this extension in Design studio 1.6? Please share the download link or github link