Lumira - enhance Geoanalysis - SDK Question

[Former Member]

Hi everybody,

I am trying to extend the Lumira Geocharts. I have a requirement to visualise data that shows movements from one location to another.

Something like in the arcs example of this URL (DataMaps) In this example there are no tooltips and no visualizations about the start and stop location, but it fits my requirements.

With this goal in mind i started to develop a local application that included an topojson lib included. I then saw the vizPacker and the article SAP Lumira - vizPacker from Matt Lloyd. Which helped me a lot. I also read the SAP Lumira SDK Getting Started Guide but i am having troubles how to include other js libraries than the default lumira ones (d3.v2.js, jquery.js, json2.js, require.js and sap.viz.js)

I can include js files in the vizpacker on the HTML page, but those changes won't reflect in my downloadable package

That is my first problem. If i would solve that i could display map data. The problem then would be that i have to provide map data in topojson format.

This leads me to my next step. Why isn't it possible to use the build in Lumira geodata. I found some very large jar files from navteq in the Lumira installation path (com.sap.geo.repository.geometries.navteq.levels012c_3.3.6.r225_v20130418.jar under Desktop\plugins)

but i don't know which component is used. All i know is that the CVOM Library (this equals to the SAPUI5 components ??) is used inside Lumira.

I am actually debugging Lumira (changing SAPLumira.ini and adding -Dhilo.cef.frame.debug=true - thanks again to Matt Lloyd !!) to see what component is used and how to use it in my SDK -bundle.js.

There was also a post from John Mrozek (http://scn.sap.com/community/lumira/blog/2013/06/05/sap-lumira-10-sp11-new-features-at-a-glance-part...) about the new features in Lumira and he pointed to a (I assume SAP intern wiki: http://viz.dhcp.pgdev.sap.corp/viz/wiki that seems to be no longer available.

If anybody could give me a hint how to solve this issue it would be really great !

If i find anything i would update this thread

Thanks and best regards

Manfred

[Former Member · Accepted solution]

Hi Manfred,

Good question!

Here are two ways you could try at your own risk to add in the new DataMaps geo extension.

You are right that Lumira extensions only allow one JavaScript file today, hopefully one day we will be able to improve that.

1. Single extension file

You could try copying the additonal JS source code that you need into your extension file so it is all in one file.

One thing I was told is to avoid is defining objects using the global namespace (so window.blah) so if the additional JS file does that you may want to tweak the code to avoid that.

2. Dynamically add the script at runtime - not officially supported

The other workaround which is not officially supported because you are modifying the page body is to dynamically add the script line to the page at runtime, do something like this:

        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://path-to-server/path-to-your-online-script';
        document.body.appendChild(script);

And then you may need to do some checking with a timer to wait till your loaded script objects are ready.

Regards

Matt

[Former Member · Accepted solution]

Hi Matt,

Thanks for your quick reply. I will try my luck and hopefully i will get it to work.

My main goal is to use the builtin cvom components. Let's see if this works out. I'll hopefully post an successful update.

If anybody else has hints about cvom and geo - please feel free to help me out.

Through debugging i found out that the involved javascript library is called sap.viz.geo.aio.js

Unfortunately everything is one long line (it seems to be the minimized version of this script file).

Perhabs someone has an idea how to switch this or has an tool to reshape it in a human readable and debuggingable form ?!?

Best regards

Manfred

[mike_howles4 · Accepted solution]

Would a JS deobfuscator help?

[Former Member · Accepted solution]

Hi Michael,

I had no clue that there are such things as a deobfuscator

But with your hint i found one of the many out there. There has to be something out there because of all the .min.js versions.

I will try my luck with this next week. Thanks for the hint !!!

Have a nice weekend.

Best regards

Manfred

[Former Member · Accepted solution]

Hi to all,
I did some more exploration in the Lumira extension space but with no to little luck so far.

I tried to include the files

http://d3js.org/topojson.v1.min.js and

http://datamaps.github.io/scripts/datamaps.all.js

I tried both ways - one to include it my extension.js file and the other way to load it dynamically.

It seemed to work, but i always get the errormessage: "ReferenceError: Datamap is not defined" iun Line 36 of the render function.

 function render(data, vis, width, height, colorPalette, properties, dispatch) {

 var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://d3js.org/topojson.v1.min.js';
 var script2 = document.createElement('script');
        script2.type = 'text/javascript';
        script2.src = 'http://datamaps.github.io/scripts/datamaps.all.js';
 document.body.appendChild(script);
 document.body.appendChild(script2);
/*
         * Start: You can remove all the code in this render function between the Start and End comments
         * and replace it with your own implementation code.
         * You can also remove the Start and End comment blocks.
         */
                //fetch data from imported data (in cross table format) and convert them.
        //if you are not familiar with cross tables or pivot tables, you can convert the data to flat table format as follows
        var fdata = _util.toFlattenTable(data);
        if (!fdata) {
            return;
        }
        var dsName = _util.mapping.dses[0], //use first dimension set as data source of x axis
        dims = fdata.meta[dsName] || [], msName = _util.mapping.mses[0], //use first measure set as data source of y axis
        measure = fdata.meta[msName][0];
        //convert data to 2-fields table: field 0 is combination of all dimensions, and field 1 is measure value
        fdata = fdata.map(function(d) {
            var val = parseFloat(d[msName][0]), //use data of first measure of first measure set
            mems = d[dsName] || [];
            val = isNaN(val) ? 0 : val;
            return [mems.join(" / "), val];
        });;
try {
  //alert ( $("#UIComp_1").text() );
   //basic map config with custom fills, mercator projection
  //alert (sampleTemplate);
  var vismap = document.getElementById('UIComp_1');
  
  var map = new Datamap({
  scope: 'world',
  element: vismap,
  projection: 'mercator',
  fills: {
    defaultFill: '#f0af0a',
    lt50: 'rgba(0,244,244,0.9)',
    gt50: 'red'
  },
  data: {
    USA: {fillKey: 'lt50' },
    RUS: {fillKey: 'lt50' },
    CAN: {fillKey: 'lt50' },
    BRA: {fillKey: 'gt50' },
    ARG: {fillKey: 'gt50'},
    COL: {fillKey: 'gt50' },
    AUS: {fillKey: 'gt50' },
    ZAF: {fillKey: 'gt50' },
    MAD: {fillKey: 'gt50' }       
  },
  done: function(datamap) {
      datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
   alert(geography.properties.name);
      });
  }
  })

  //sample of the arc plugin
  map.arc([
  {
  origin: {
      latitude: 40.639722,
      longitude: 73.778889
  },
  destination: {
      latitude: 37.618889,
      longitude: -122.375
  }
  },
  {
    origin: {
        latitude: 30.194444,
        longitude: -97.67
    },
    destination: {
        latitude: 25.793333,
        longitude: -0.290556
    }
  }
  ], {strokeWidth: 2});

  //bubbles, custom popup on hover template
  map.bubbles([
  {name: 'Hot', latitude: 21.32, longitude: 5.32, radius: 10, fillKey: 'gt50'},
  {name: 'Chilly', latitude: -25.32, longitude: 120.32, radius: 18, fillKey: 'lt50'},
  {name: 'Hot again', latitude: 21.32, longitude: -84.32, radius: 8, fillKey: 'gt50'},
  ], {
  popupTemplate: function(geo, data) {
   return "<div class='hoverinfo'>It is " + data.name + "</div>";
  }
  });
 } catch (Exception) {
  vis.append("text").text(Exception).attr("x", 150).attr("y", 20).attr("font-size","large");
 }

Due to the fact that this vis Object is just a d3 svg area i was thinking of hijacking the surounding div with the ID UIComp_1 but when i am not able to instantiate a Datamap object it would make no sense.

For those of you who want to give it a try i changed only the render method of the default vizpacker extension.

Best regards

Manfred

[Former Member · Accepted solution]

another step further - i got my example running locally with a html file without a problem. as soon as i try to include the working javascript into my vizpackager i get in trouble.

I assume i have to find out how require.js is working - as it seems, that this handles all javascript access.

Does anybody have a clue for me or experience with require.js and Lumira ?

[mike_howles4 · Accepted solution]

Is this the same require as the jQuery.sap.require or something different?

Also, this is a long shot, but you may be able to get sap.ui.core to do the JS library loading for you:

https://openui5.hana.ondemand.com/docs/api/symbols/sap.ui.core.Core.html#loadLibrary

var core = sap.ui.getCore();
core.loadLibrary("nameofLibrary", "http://url.to.library/something.js);

[mike_howles4 · Accepted solution]

I just tried my suggestion above, looks like SAPUI libraries are not available in the vizPacker environment.  Next, I tried $.getScript() but something is preventing the attachment of even Datamap to the window object.  I suspect (as you have already arrived at) that require.js is preventing the typical JS loading usages.  I'm not familiar enough with require, requirejs and define commands to figure out how to load the topojson modules, either - But I am now interested to figure it out

I'll post back if I can arrive at the proper syntax.

[Former Member · Accepted solution]

Hi Michael,

I was and i am reading a lot about require.js and i have not made much progress.

I will give it a try and hopefully post a solution very soon.

Thank you for also investigating in this issue

Cheers Manfred

[Former Member · Accepted solution]

Hi,

I've made progress and have an already working version. require.js is tackled

I have to fix the data binding and i will post it during the next week.

Have a nice weekend

[mike_howles4 · Accepted solution]

Look forward to seeing it - Thanks!

[Former Member]

So - the week is just over and i have to deliver

As promised i created an document in the Lumira space: http://scn.sap.com/docs/DOC-52807

Please take a look and give me feedback if there are any errors or weak descriptions in it.

This addon is not ready and can easily be extended. One main point for me was to tackle the require.js and to have a possibility to visualize routes in Lumira.

Take care and happy weekend.

Manfred

[Former Member]

i'd also love to see you get this working...