Leaflet and KNIME Integration or similar

[francois.protopapa]

Dear All,

somebody had already integrated KNIME data with Leaflet Mapping solution http://leafletjs.com ? or do you have better suggestions for advance / dynamic Geographical solution than OSM Map?

I would like to have a Map solution that allow me to zoom in, zoom out areas, highlight polygony areas and by clicking it poping up variable information coming from KNIME (ex: density, population, etc).

Check these examples as references:

http://leafletjs.com/examples/choropleth.html

http://leafletjs.com/examples/quick-start.html

Thank you 

[Iris]

Hi Francois,

did you try using the Generic Java Script node for this?

Here is a blog post describing it.

https://www.knime.org/blog/from-d3-example-to-interactive-knime-view-in-10-minutes

And there was another one by Marco.

Best, Iris

[francois.protopapa]

Hi Iris,

thank you for your feedback, I am trying the integration with Generic Java Script Node. I will keep update the post with the implementation.

Regards,

Frank

[AlexanderFillbrunn]

Hi Frank,

have you managed to get it working? You can just paste the minified leaflet.js code into the JavaScript text box in the dialog of the Generic JavaScript View (right at the top). Then you have to copy the leaflet CSS into the box on the right.

After the leaflet JS code, you have to create a div that will hold the map and then call the necessary leaflet functions for it. Make sure to give the div an explicit width and height! In the end the JavaScript code should look approximately like this:

// <--- The minified leaflet code goes here

var body = document.getElementsByTagName('body')[0];
var html = '<div id="map" style="width: 500px; height: 500px;"></div>';
body.innerHTML = html;

var mymap = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'your.mapbox.project.id',
    accessToken: 'your.mapbox.public.access.token'
}).addTo(mymap);

Of course you need to set the correct URL format yourself.

Regards,

Alexander