Issue creating map with HTMLPanel

[jerdoganTorrential]

I have the following code.

public class MapWidget {

    Map itsMap;
    public MapWidget(HTMLPanel inHTMLPanel) {
        LatLng center = L.latLng(0, 0);
        HTMLElement mapElement = new HTMLElement();
        mapElement.innerHTML = inHTMLPanel.getElement().getInnerHTML();
        itsMap = L.map(mapElement, new MapOptions.Builder(center, 1, 1).build());
    }
    public HTMLElement getElement(){
        return itsMap.getContainer();
    }
}

I get the following error in my console.

MapWidget.java:21 Uncaught TypeError: Cannot read property 'gwidgets' of undefined

The line the it complains about is HTMLElement mapElement = new HTMLElement();

I believe it has to use a builder to create that but looking at what is available from L class there doesn't seem to be one.

I was following what was done in the following issue https://github.com/gwidgets/gwty-leaflet/issues/2

Any help would be greatly appreciated.

[zak905]

Hi,

What I mentioned in issue #2 will obviously not work, that was untested code, my bad. The HTMLElement does not have a constructor in native javascript (https://developer.mozilla.org/en/docs/Web/API/HTMLElement), and since HTMLElement is meant to wrap the native javascript object, it will not work using a constructor. I have added two functions to the Document class (version 0.5-SNAPSHOT), so now you can do something like:

HTMLElement mapElement = Document.createElement("div");
mapElement.id = "yourId";
itsMap = L.map(mapElement, new MapOptions.Builder(center, 1, 1).build());
Document.getBody().appendChild(mapElement);

For some reason, the map does not render properly when using HTML inside HTMLPanel:

    HTMLPanel panel = new HTMLPanel(mapElement.outerHTML);  
        RootPanel.get().add(panel);

I advise you to keep with the elements for now.

If you need other methods or properties from HTMLElement(https://developer.mozilla.org/en/docs/Web/API/HTMLElement) or Document (https://developer.mozilla.org/en-US/docs/Web/API/Element), you can add them and make a PR, I will integrate them into the project.

[aeromac]

I also got the error "Cannot read property 'gwidgets' of undefined". However for me, it was caused by trying to create a new LatLng, instead of using L.latLng(). Maybe check to see if you might be doing the same?

I was able to cast an old-school gwt element with no problem: L.map((HTMLElement) Js.cast(element), ...);

[zak905]

are you using the latest version ? the latest version uses elemental 2 types, so one way to do it would be:

	    HTMLElement element = (HTMLElement) DomGlobal.document.createElement("div");
	    element.style.height = CSSProperties.HeightUnionType.of("400px");
	    element.style.width = CSSProperties.WidthUnionType.of("400px");
	    DomGlobal.document.body.appendChild(element);
	   final Map map = L.map(element, options);