v-leaflet-draw vs v-leaflet-editable vs OpenLayers wrappers

I have the need to display background maps fetched via WMS from a GeoServer instance and to be able to create a polyline overlay where the individual vertices snap to arbitrarily located features that I know about. Ideally this would mean that I can pick up a ‘vertex drop’ event and modify the actual location of the vertex on-the-fly.

I have implemented an overly simple solution once for Vaadin 6 using the OpenLayers wrapper here: https://vaadin.com/directory#!addon/openlayers-wrapper and then again using V-Leaflet when we moved to Vaadin 7 as there was no OpenLayers addon at that point.

I now need to reproduce the style of polyline creation/editing shown in the v-leaflet example here: http://v3.tahvonen.fi/vleafletexample/. As far as I can see this requires me to use the V-Leaflet-Draw ‘addon addon’.

I notice that there is another v-leaflet addon: V-Leaflet-Editable which appears to be more recent and I’m wondering if I should use this but I notice that it is marked as not supporting Vaadin 7 (is that really true?).

The old OpenLayers Wrapper does not support Vaadin 7 and I’m assuming that it never will so I’m not considering that.

I suspect I could also use OpenLayers 3 Wrapper for Vaadin (https://vaadin.com/directory#!addon/openlayers-3-wrapper-for-vaadin) but I’m not clear about pros and cons for these various approaches.

Does anyone have any experiences/thoughts they’d like to share?




v-leaflet-editable is quite nice, I use it myself currently. It e.g. supports real polygons (with holes) unlike v-leaflet-draw. And it indeed supports Vaadin 7, NOT Vaadin 6. I fixed that in the Directory.

OpenLayers 3 Wrapper for Vaadin is another soluiton. I have been favoring Leaflet over OpenLayers lately, but I have to confess that haven’t really used OpenLayers 3 that much that I could really make a suggestion which one is better. Leaflet is definitely better than OL2.


Thanks for that Matti.

The particular issue for me at the moment is that I am trying to get hold of individual vertex related events generated when a polyline is created/edited. This is so that I can snap the vertex being created/inserted/moved to the nearest predetermined feature in the vicinity or to be able to create a popup to disambiguate two features close to each other.

I can’t see any way of doing that with v-leaflet-draw, the events just don’t seem to be there and I suspect they’re not even available in Leaflet.Draw); do you know if it’s possible in v-leaflet-editable?




At least
has a huge set of events it can fire. I have added just the events that I have needed. I think it shouldn’t be hard to add listeners to get notified on each intermedieate modification as well. Not sure though how easy it is to modify the currently edited vector.


Hi Matti,

I just join a team to implement a transportation data presentation project: http://uwdrive.net/. The project has been developed for several years and it used the Vaadin 6 to manage the UI. In this project, we need to implement a function using Openlayer Wraper Add-on to show some vectors like animation in this link: http://matti.virtuallypreinstalled.com/ol-demo/VectorAnimation. But when we add this function in our project, it always draw the last vector that the function cannot be shown like an animation. Could you please give some advice or provide the source code fo the demo?

Here is my code:
leftLoopTrafficPanel.button_video.addListener(new ClickListener() {
private static final long serialVersionUID = 1L;

        public void buttonClick(ClickEvent event) {
            System.out.println("button_video clicked!");
            for(int i = 1; i<3;i++){
                Thread draw = new Thread(new Draw(i));
        class Draw implements Runnable{
            private int i;
            public Draw( int i){
                this.i = i;
            public void run() {
                // TODO Auto-generated method stub
                try {
                } catch (InterruptedException e) {
                    // TODO Auto-generated catch block
                synchronized (getApplication()){


Hi Zhiyong,

I haven’t yet needed animations in my v-leaflet apps so I haven’t built any extra features. Basic “server side animations” whould be doable today. I can’t promise to work on these during the next couple of weeks, but I created these issues for animations: