We're having trouble using a mapwidget in a splitpane

[mathias]

Hi,

we're having some frustrating problems with using a gwt maps widget with splitpanes.

SUMMARY:
We have used map widgets with smartgwt in TabSet/Tabs for 10+ years and with tweaks it has worked fine. However, we're upgrading our web,
and with some (consulting) help from you guys last summer, we moved over to a tree with splitpanes, and now it turns out that it doesn't work with our maps widget.


PROBLEM:
We have a splitpane with a tree to the left for sections. when the tree is clicked, setDetailPane() is called with different canvases.
(in our current web we add each canvas once to different tabs which works)

However, now, when a layout with the map widget is called the first time, the size is correct. However, when another canvas is set as detailpane,
and then the mappane is set as details a second time (i.e. the user clicks around), the size and height is messed up.

We have tried tons of different things, to no avail. (resizehandlers, hardcoding witdh/height in different ways etc.)

I think the reason is that setDetailPane adds/removes the canvases, whereas for tabsets, they are added, then shown/hidden? Just a guess though.


SOLUTION:
What i had to do was to only have a static layout as detailpane, then add all my sections once to it. Then, when the tree is clicked, hiding all others, and showing only the one that
represents the node in the tree. It works, but it feels a bit clunky?



QUESTION:
Why is this happening? Is there an easy way to make the gwt map widget not change its sizing that we've missed when setDetailPane is called on the splitpane?
We use the map widget in several places, so knowing this would really be beneficial.


...
I made a video showing what happens and added it to google drive here:
https://drive.google.com/file/d/10RZ...ew?usp=sharing


I have also made a small self-contained test project which i've also added to google drive here:
https://drive.google.com/file/d/1rBH...ew?usp=sharing

(This test-project is incidentally of course an example on how to use gwt maps in smartgwt. You know, in case you're bored some day and start thinking about maps and SmartGWT... (I have of course tons of additional code on how to actually use it - adding markers, shapes, directions, paths and other functionality like that))



For direct reference, the entrypoint code which is also in the testproject:

package com.test.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.user.client.ui.Widget;
import com.smartgwt.client.types.SelectionStyle;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.layout.SplitPane;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;
import com.smartgwt.client.widgets.tree.Tree;
import com.smartgwt.client.widgets.tree.TreeGrid;
import com.smartgwt.client.widgets.tree.TreeNode;

/**
 * This is the main entrypoint for the test application.
 */
public class Test implements EntryPoint {

    public void onModuleLoad() {

        Runnable onLoad = () -> {
            //createTabLayout();//WORKS
            createSplitPaneLayout();
        };
        MapLoader.loadMapApi(onLoad, "en", null);
    }

    //WORKS
    private void createTabLayout(){
        TabSet tabSet = new TabSet();
        tabSet.setWidth100();
        tabSet.setHeight100();

        Tab tab1 = new Tab("GWT");
        tab1.setPane(getMapTab());
        tabSet.addTab(tab1);

        Tab tab2 = new Tab("Another");
        tab2.setPane(getOtherTab());
        tabSet.addTab(tab2);

        tabSet.draw();
    }

    //DOES NOT WORK
    public void createSplitPaneLayout() {
        SplitPane pane = new SplitPane();
        TreeNode[] sections = new TreeNode[]{new TreeNode("GWT"), new TreeNode("Another")};
        Tree tree = new Tree();
        tree.setNameProperty("name");
        tree.setData(sections);

        TreeGrid treeGrid = new TreeGrid();
        treeGrid.setData(tree);
        treeGrid.setSelectionType(SelectionStyle.SINGLE);

        Canvas pane1 = getMapTab();
        Canvas pane2 = getOtherTab();

        treeGrid.addClickHandler(event -> {
            if (treeGrid.getSelectedRecord() != null) {
                pane.setDetailPane(treeGrid.getSelectedRecord().getName().equals("GWT") ?  pane1 : pane2);
                pane.showDetailPane();
            }
        });
        pane.setNavigationPane(treeGrid);
        pane.setWidth100();
        pane.setHeight100();
        pane.draw();
    }

    private Canvas getMapTab() {
        Canvas pane1 = new Canvas();
        pane1.setWidth100();
        pane1.setHeight100();
        pane1.addChild(getMap());
        return pane1;
    }

    private Widget getMap() {
        Widget map =  new MapWidget(MapLoader.getDefaultOptions());
        map.setPixelSize(550, 550);
        return map;
    }

    private Canvas getOtherTab(){
        VLayout pane = new VLayout();
        Img img = new Img("/images/c64_city.png", 660, 302);
        pane.addChild(img);
        return pane;
    }
}

[Blama]

Hi mathias,

thumps up for the test project! I'll definitely have a look.

Best regards
Blama

[Isomorphic]

There's really no way to say what's wrong here without a deep dive into your MapWidget code. As you speculate, it probably doesn't handle a clear()/draw() cycle properly. If you don't want to upgrade it to handle this, then your approach of having a single DetailPane widget and just showing/hiding contents is fine, and a Deck (mutually exclusive container, like a TabSet with no tabs) is probably the easiest approach, and should result in quite simple code, which is likely to be more efficient as well.

[mathias]

ok. Well, i don't think i can afford to spend time digging into the thirdparty library to fix it. It would take me ages just to figure out where to start with the native js code. Cheers.