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.

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

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

Pack it
  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.

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

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

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

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.

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

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