Vaadin Grid row details with v-leaflet

Vaadin 6 / 7 / 8
1

Hi,

I am trying to add a Leaflet Map from the v-leaflet addon (version 1.0.0-b5) to a Grid row detail (Vaadin 7.6.0) but am facing an issue.
I have a very basic test case - the DetailsGenerator of the grid is set to return a HorizontalLayout with a single LMap component added to it - the LMap has one marker added, and is set to be centered at the location of the marker.

When the row details are displayed in the grid, the LMap component is rendered, but the map is not centered at the specified co-ordinates (rather the marker is at the top-left of the component, just out of view).

When I expand another row in the grid, the map in the first row details is then rendered correctly, bu the map in the newly expanded row is not. And so on. Please see aatachments for first row expansion (2.png) and second (3.png).

I really want to use the leaflet map in preference to the google map addon but at this stage this issue is preventing that (using a google map in the row details does not cause such an issue).

Can anyone help as to why the LMap is not rendered correclty when the row details is first displayed???

Source code is below:-

package com.gb;

import org.vaadin.addon.leaflet.LMap;
import org.vaadin.addon.leaflet.LMarker;
import org.vaadin.addon.leaflet.LTileLayer;

import com.vaadin.annotations.Theme;
import com.vaadin.event.ItemClickEvent;
import com.vaadin.event.ItemClickEvent.ItemClickListener;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Component;
import com.vaadin.ui.Grid;
import com.vaadin.ui.Grid.DetailsGenerator;
import com.vaadin.ui.Grid.RowReference;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme(“test”)
public class TestUI extends UI {

@Override
protected void init(VaadinRequest request) {
    VerticalLayout vl = new VerticalLayout();
    vl.setSizeFull();
    setContent(vl);
    final Grid grid = new Grid();
    grid.setSizeFull();

    // Define some columns
    grid.addColumn("name", String.class);
    grid.addColumn("born", String.class);

    // Add some data rows
    grid.addRow("Nicolaus Copernicus", "");
    grid.addRow("Galileo Galilei", "");
    grid.addRow("Johannes Kepler", "");

    grid.setDetailsGenerator(new DetailsGenerator() {
        public Component getDetails(RowReference rowReference) {
            HorizontalLayout layout = new HorizontalLayout();
            final LMap leafletMap = new LMap();
            leafletMap.setImmediate(true);
            final LTileLayer baselayer = new LTileLayer();
            baselayer.setAttributionString( "OpenStreetMap" );
            baselayer.setUrl( "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" );
            leafletMap.addLayer( baselayer );
            leafletMap.setWidth("200px");
            leafletMap.setHeight("100px");
            leafletMap.setZoomLevel(3);
            LMarker leafletMarker = new LMarker(-21.54, 30.76);
            leafletMap.addComponent(leafletMarker);
            leafletMap.setCenter(-21.54, 30.76);
            layout.addComponent(leafletMap);
            return layout;
        }
    });

    grid.addItemClickListener(new ItemClickListener() {
        public void itemClick(ItemClickEvent event) {
            Object itemId = event.getItemId();
            grid.setDetailsVisible(itemId, !grid.isDetailsVisible(itemId));
        }
    });
    vl.addComponent(grid);
}

}
22585.png
22586.png
22587.png

2

I ended up integrating the Leaflet javascript component myself via a custom javascript component - I had exactly the same issue with this new Leaflet component.

By putting a small delay (500ms) into the javascript before setting up the map, it is now working. But this solution does not feel right. Anyone have any ideas why the grid row details does not render the leaflet component correctly?

Below is my javascript that enables the Leaflet component to render correctly in the grid row details:-

window.com_test_ui_leaflet_LeafletMap = function() {
var diagramElement = this.getElement();
var mapDiv = document.createElement(“div”);
var id = this.getState().mapId;
var lat = this.getState().latitude;
var lon = this.getState().longitude;
mapDiv.setAttribute(“id”, id);
mapDiv.setAttribute(“style”, “height:100px; width:200px;”);
diagramElement.appendChild(mapDiv);

var tiles = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

var millisecondsToWait = 500;
setTimeout(function() {
    var map = L.map(id, { zoomControl:false })
      .addLayer(tiles)
      .setView([lat, lon]

, 4);
var marker = L.marker([lat, lon]
).addTo(map);
}, millisecondsToWait);
}

Any ideas why this is so and a better solution?

3

Hi,

I created issue https://github.com/mstahv/v-leaflet/issues/109 for this. I think it is a Grid bug, but should probably find out a workaround for this, looks like a valid use case.

cheers,
matti

4

There is now a workaround in the master branch. Can you build a SNAPSHOT from sources and try if it works for you?

cheers,
matti

5

Thank you very much Matti. I have just built 1.0.0-b6-SNAPSHOT from GitHub and can confirm that fixes the issue I was facing. Screenshot attached shows behaviour now.

Thanks again for your help.
22669.png

6

While grid row details state is visible, if you try to change its height (open panel in it with greater height) details row height is unchanged and it cut bottom part totally. Is it bug or I’m doing something wrong?
Thanks.

P.S Little off this topic I know, sorry.

7

It might be a bug, I have heard some similar reports with other components as well. You could try with Vaadin 7.7.0.alpha1 if this issue is still there. If it is, lets create a ticket and get it fixed for 7.7.0.

cheers,
matti