Integration OpanLayers 6 with Vaadin 14

Flow
1

Does anybody integrate the last OpenLayers with Vaadin flow using npm and webpack?
I tried the following steps (based on paper-slider example in the documentation):

  1. npm install ol in the project directory
  2. create component class with annotations:
@Tag("ol")
@NpmPackage(value = "ol", version = "6.1.1")
@JavaScript("ol/main.js")
public class Ol extends Component {
...
}

and javascript main.js containing code for create the simple map:

var map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
  view: new View({
    center: [0, 0]
,
    zoom: 2
  })
});
  1. Insert the component to the layout:
...
Ol ol = new Ol();
ol.setId("map");
add(ol);
...

There is no effect on the page, only empty tag


    During the deployment I see webpack log messages noted that all javascripts including OpenLayers and mine was accepted and build.
    I would be appreciated for any advice.

    Regards,
    Sergey Koltypin

2

Hi Sergey,

I made a demo with Vaadin and openlayers 6 with webpack here:
https://github.com/jcgueriaud1/vaadin-openlayers-demo

I changed few things from your code:

  • I didn’t use ol tag as it’s a html tag (renamed to openlayers)
  • I didn’t use the id map

I think in your code you have a javascript error because Map is not defined. (the npm package ol is downloaded but never imported)

I copy/paste the css from the openlayer library to the demo project in frontend/styles, I don’t know how to import the css from the npm package :confused:

You can try my demo and check if it’s working, if you need explanations don’t hesitate to ask :slight_smile:

3

Dear Jean!
Yes, this works fine, thanks.
There were no javascript errors because we have run “npm install” manually (without annotation as in your example)

Also there is another sample (as derived class from basic Polymer component):
https://stackoverflow.com/questions/59250823/openlayers-and-vaadin-14

But there is a problem with ol.css, so your solution is correct)).

Regards,
Sergey