Lumira Geoextension with datamaps.js and topojson.js
Hi to all,
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
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”
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
to the folder
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.
- Configure your environment and tell require.js where the js libs are
- 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
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
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
P.S.: Attachement of zips is not allowed. i put a .txt afterwards. Just remove the .txt and you should be fine