Error When Using Two Map Instances in the Same View.

[federicoisaia]

Describe the bug

I am encountering a weird bug when having two map instances in the same view. I have some logic that conditionally hides one of the map. Occasionally (and seemingly at random), an error is thrown and the map is shown in development mode.
Interestingly, if I remove the logic that toggles the map’s visibility the error never occurs.

Expected behavior

No response

Minimal reproducible example

Here is the view causing the issue. To reproduce the bug navigate between tabs, other views or refresh the page. At some point, the error eventually occurs.

public MapviewView() {
    setSizeFull();
    setMargin(true);
}

private void configLastLocationLayout() {
    lastLocationVerticalLayout.setSizeFull();
    lastLocationVerticalLayout.setPadding(false);

    lastLocationGoogleMap.setCenter(new LatLon(40.415478231316406, -3.7025392739019054));
    lastLocationGoogleMap.setSizeFull();

    lastLocationVerticalLayout.add(lastLocationGoogleMap, noLastLocationHint);
}

private void configRouteLayout() {
    routesVerticalLayout.setSizeFull();
    routesVerticalLayout.setPadding(false);

    routesGoogleMap.setCenter(new LatLon(40.415478231316406, -3.7025392739019054));
    routesGoogleMap.setSizeFull();
    routesGoogleMap.setVisible(true);
    routesVerticalLayout.add(routesGoogleMap);
}

private void configTabsheet() {
    tabsheet.setSizeFull();
    tabsheet.add(lastLocationTab, lastLocationVerticalLayout);
    tabsheet.add(routesTab, routesVerticalLayout);

    tabsheet.addSelectedChangeListener(ce -> {
        if (ce.isFromClient()) {
            if (lastLocationTab.equals(ce.getSelectedTab())) {
                updateLastLocationTab();
            } else if (routesTab.equals(ce.getSelectedTab())) {
                updateRoutesTab();
            }
        }
    });
    add(tabsheet);
}

private void updateRoutesTab() {
    routesMapLines.stream().forEach(p -> routesGoogleMap.removePolyline(p));
    routesMapLines.clear();

    List<List<Double>> events = List.of(List.of(40.415478231316406, -3.7025392739019054),
            List.of(41.415478231316406, -3.0025392739019054),
            List.of(39.415478231316406, -2.7025392739019054));

    List<GoogleMapPoint> routePoints = events.stream()
            .map(event -> new GoogleMapPoint(new LatLon(event.get(0), event.get(1)))).toList();

    GoogleMapPolyline polyline = new GoogleMapPolyline(routePoints);
    polyline.setStrokeColor("#d42020ff");
    polyline.setStrokeWeight(3.0);

    routesGoogleMap.addPolyline(polyline);
    routesMapLines.add(polyline);
}

private void updateLastLocationTab() {

    boolean lastLocationVisible = Math.random() < 0.5;

    Double latitude = 40.4168;
    Double longitude = -3.7038;

    GoogleMapMarker marker =
            new GoogleMapMarker("Last location", new LatLon(latitude, longitude), false);
    lastLocationGoogleMap.addMarker(marker);
    lastLocationGoogleMap.setZoom(12);
    lastLocationGoogleMap.setCenter(new LatLon(latitude, longitude));

    lastLocationGoogleMap.setVisible(lastLocationVisible);
    noLastLocationHint.setVisible(!lastLocationVisible);

}

@Override
protected void onAttach(AttachEvent attachEvent) {
    lastLocationGoogleMap = new GoogleMap(GOOGLE_API_KEY, null, null);
    routesGoogleMap = new GoogleMap(GOOGLE_API_KEY, null, null);
    configTabsheet();
    configLastLocationLayout();
    configRouteLayout();

    updateLastLocationTab();
}

}

Add-on Version

2.3.0

Vaadin Version

24.8.1

Additional information

No response

[paodb]

Instead of lastLocationGoogleMap.setVisible(lastLocationVisible); could you try lastLocationGoogleMap.getElement().getStyle().set("display", lastLocationVisible ? "block" : "none"); as a workaround? I'm still investigating why using setVisible causes this issue but the workaround seems to work as expected.

[paodb]

Another workaround could be to hide the layout containing the map instead of the map. That also seems to hide it without complaining.

private void configLastLocationLayout() {
        ....
        lastLocationMapVerticalLayout.setSizeFull();
        lastLocationMapVerticalLayout.add(lastLocationGoogleMap);

        lastLocationVerticalLayout.add(lastLocationMapVerticalLayout, noLastLocationHint);
}

private void updateLastLocationTab() {
        ....
        lastLocationMapVerticalLayout.setVisible(lastLocationVisible);
        noLastLocationHint.setVisible(!lastLocationVisible);
}