Using Datamaps in Vaadin/Embedding HTML

Flow
1

Hello,

I was tasked to create a map that will show real time data using arcs, together with a vaadin applet to do some configuration. But now I’d like to combine the two.
I have created an HTML file with JS/CSS to draw the map and the arcs, is there a way to show/embed this in my vaadin application?

I have also tried creating a polymer-template and running the map JS on that, but that resulted in:
TypeError: Cannot read property 'document' of undefined.
The JS is as follows:

window.onload = function () {
    window.d3 = require("d3");
    window.geo = require("d3-geo");
    window.topo = require("topojson");
    window.jquery = require("jquery");
    window.world = require("datamaps/dist/datamaps.world.hires.js");
    var map = new Datamap({
        element: window.getElementById("map"),
        fills: {
            ...
        },

        geographyConfig: {
            ...
        }
    });
}

Is it possible to embed a Static HTML page into my vaadin application, or would it be best to just link from the HTML to the Vaadin URL (Using vaadin 14), or, as described above, would it be best to use the JS on a Polymer-template page (if so what does the error mean).

Thanks in advance,
Tom

2

Hi,

Without having the context of the error, it’s not easy to guess what is going on.
one problem could be window.getElementById(“map”) that may return null.

Because if the id map is inside a polymer template + shadow dom you cannot retrieve it this way.

if you want to embed a html page you can use an iframe in vaadin.

3

Jean-Christophe Gueriaud:
Hi,

Without having the context of the error, it’s not easy to guess what is going on.
one problem could be window.getElementById(“map”) that may return null.

Because if the id map is inside a polymer template + shadow dom you cannot retrieve it this way.

if you want to embed a html page you can use an iframe in vaadin.

Thank you for the response, but I’ve tried IFrame already. It did not recognize the url.

This is the code for the homepage:

@Route("home")
@JavaScript("./screens/homepage/hub.js")
public class HomePage extends HorizontalLayout {

    public HomePage() {
        IFrame iFrame = new IFrame();
        iFrame.setSizeFull();
        setHeight("100%");
        iFrame.setSrc("./index.html");
        add(iFrame);
    }
}

and the folders:

-homepage
--HomePage.java
--index.html

The error:

Could not navigate to 'index.html'
Reason: Could not find route for 'index.html'
4

Hi,

I’m not sure if you put the html file at the right place. A static file should be in the webapp folder.

I think you should try to reach the page ( like http://localhost:8080/index.html ) and if it’s working then try the iframe.