I'm new to gwt-maps-3.8.0 v3, if i try to display maps in multiple windows, it is not displaying fully, instead, it shows half of the map in window. Please check my code, and tell me whether anything is missing..
public class MapTest extends HorizontalPanel {
GoogleMap map;
VerticalPanel mapVp = new VerticalPanel();
public MapTest(){
mapVp.setSize(String.valueOf(BodyPanel.bodyWidth - 505),
String.valueOf(BodyPanel.bodyHeight + 5));
LatLng myLatLng = LatLng.create(30.440099, 36.843498);
MapOptions myOptions = MapOptions.create();
myOptions.setZoom(5);
myOptions.setCenter(myLatLng);
myOptions.setMapTypeId(MapTypeId.TERRAIN);
myOptions.setMapTypeControl(true);
map = GoogleMap.create(mapVp.getElement(), myOptions);
add(mapVp)
}
}
TabItem tabItem = new TabItem("MapTest");
tabItem.add(new MapTest());
This shows the full map... When i do the same code and add that in another tab, it reduces the map size.. Trying to resolve this, pls help...
i.e, Again initializing the tabitem and trying to add the same page in other tab as
tabItem = new TabItem("MapTest");
tabItem.add(new MapTest());
I solved this by adding a Delay in loading maps using GWT Timer.. Referred Joomla Solution and implemented in GWT...
Here is link
Related
I'm new to leaflet and am trying to implement a set of markers with different CSS-styles.
So, I am aware that after adding a marker to a map I can access different CSS-attributes by calling getElement() on my marker for example:
marker.addTo(map);
marker.getElement().style.borderColor = '#000';
This works just fine, but when adding a marker to a layer, this can no longer be used since a TypeError occurs (getElement() is undefined). Here is the example code where the error occurs:
myLayer.addLayer(marker);
marker.getElement().style.borderColor = '#000';
Am I overlooking a simpler way to set CSS-Attributes for markers and divicons that are added to layers or is there a similar way to access layer-added markers and divicons in JavaScript?
So I found a solution that is working for me.
The idea is to extend the function that is used to create the icon.
Last answer here github.com/Leaflet/Leaflet/issues/5231 helped a lot.
var borderSize = ...;
L.DivIcon.Custom = L.DivIcon.extend({
createIcon: function(oldIcon) {
var icon = L.DivIcon.prototype.createIcon.call(this, oldIcon);
icon.style.borderSize = borderSize;
...
return icon;
}
})
var icon = new L.DivIcon.Custom({
...
});
var ll = L.latLng(entry.Longitude, entry.Latitude);
var marker = L.marker(ll, {
icon: icon
})
this.myLayer.addLayer(marker);
Welcome to SO!
When not added onto a map (since your parent myLayer may not be added to the map itself), a marker does not have any element.
If you do not need to change too many styles individually and dynamically, you might rather use the className option of your Icon / DivIcon.
I use Gwt 2.6.1 (with Activities and Places framework) and gwt-openlayers 1.0
The problem comes when i use a google layer (Google or GoogleV3 instance) as base layer. The map appears but i can't zoom or drag and the openlayers controls are missing from the display (zoom buttons, layer switcher, scale line). After hitting F5 (refresh), the problems are gone and everything works fine.
With Bing baselayer these problems aren't occurred.
The situation is complex but it can be reproduced:
You need 3 pages.
first: this is the welcome page
second: it can be empty. it has a place token: "secondPage"
third: the page that contains the map (#mapPage)
You can see the welcome page, when you open your application in the browser. Then type the token of the second page after the url (#secondPage). After the second page is displayed, type the token of the third page after the base url (#mapPage).
If you follow this scenario, the mentioned problems will come.
The ui.xml of the third page:
<gxt:ContentPanel headerVisible="false" borders="false" bodyBorder="false" height="500px" width="500px"/>
The View of the third page:
...
#Override
public Widget asWidget() {
this.widget = TestView.uiBinder.createAndBindUi(this);
((ContentPanel) TestView.this.widget).add(TestGoogle.getMap());
return this.widget;
}
...
TestGoogle class:
public class TestGoogle {
public static MapWidget getMap() {
MapOptions defaultMapOptions = new MapOptions();
defaultMapOptions.setNumZoomLevels(16);
MapWidget mapWidget = new MapWidget("100%", "100%", defaultMapOptions);
GoogleV3Options gHybridOptions = new GoogleV3Options();
gHybridOptions.setIsBaseLayer(true);
gHybridOptions.setType(GoogleV3MapType.G_NORMAL_MAP);
GoogleV3 gHybrid = new GoogleV3("Google Hybrid", gHybridOptions);
Map map = mapWidget.getMap();
map.addLayer(gHybrid);
map.addControl(new LayerSwitcher());
map.addControl(new OverviewMap());
map.addControl(new ScaleLine());
LonLat lonLat = new LonLat(6.95, 50.94);
lonLat.transform(ProjectionCode.LONGLAT.getEpsgCode(), map.getProjection());
map.setCenter(lonLat, 12);
return mapWidget;
}
}
I've found the problem. I included the google maps api script in the host page twice.
I have a loading popup that I need to display on the top of the page, even if the user scroll down.
What I tried so far is to set the popup position as follows
setPopupPosition(Window.getClientWidth()/2 , 0);
The popup shows up on the absolut top.
The situation can be resolved easily if you view it from a different angle: Not the popup position should adjust to the page - instead, the page should scroll behind the centering popup, e.g.:
final ScrollPanel scrollPanel = new ScrollPanel();
RootLayoutPanel.get().add(scrollPanel);
pagePanel = new FlowPanel();
scrollPanel.setWidget(pagePanel);
pagePanel.add(...);
Now add the entire page contents to pagePanel (instead of adding them directly to rootPanel).
Then you can create popups like this:
final PopupPanel popupPanel = new PopupPanel();
popupPanel.add(...);
popupPanel.center();
You'll still have to re-center the popup when the window resizes, but apart from that, the popup will always be at the center in front of the scrolling page.
To achieve this you can implement Window.addWindowScrollHandler. It will always be on top whatever you do.
DialogBox dialog = new DialogBox();
dialog.setWidget(...);
Window.addWindowScrollHandler(new ScrollHandler() {
#Override
public void onWindowScroll(ScrollEvent event) {
dialog.setPopupPosition((Window.getClientWidth() - widthOfDialog) / 2, event.getScrollTop());
}
});
Hope this helps.. Thanks..
The solution that worked for me is this
setPopupPosition(Window.getClientWidth()/2 , Window.getScrollTop());
I'm using a GWT library (gwt-openlayers) which allows me to create a map popup containing arbitrary HTML, similar to Google Maps. I need this HTML to contain a GWT Button widget.
I'm creating some HTML elements on-the-fly like this:
Element outerDiv = DOM.createDiv();
outerDiv.getStyle().setOverflow(Overflow.HIDDEN);
outerDiv.getStyle().setWidth(100, Unit.PCT);
outerDiv.appendChild(new HTML(mapPOI.getHtmlDetails()).getElement());
Button popupButton = new Button("View Property");
popupButton.getElement().getStyle().setFloat(com.google.gwt.dom.client.Style.Float.RIGHT);
outerDiv.appendChild(popupButton.getElement());
Then I'm getting the source HTML for these elements by calling
String src = outerDiv.toString();
and inserting this html into my map marker. Now my map marker displays the content ok, including the button. However, the button won't respond to any events! From what I can gather, this is because the buttons onAttach() method is never being called.
Is there a better way to do this?
Thanks,
Jon
~~~~EDIT~~~~
I'm now trying a new way of doing this, which seems to be the accepted method looking at other similar posts.
First I'm creating my div:
String divId = "popup-" + ref;
String innerHTML = "<div id=\"" +divId + "\"></div>";
Then I'm adding this to my map popup and displaying it (which adds it to the DOM). After the popup has been displayed, I'm getting the Element as follows and trying to wrap a HTMLPanel around it:
Element element = Document.get().getElementById(divId);
HTMLPanel popupHTML = HTMLPanel.wrap(element);
My div element is successfully retrieved. However, HTMLPanel.wrap(element); doesn't complete. The reason for this is that wrap(..) calls RootPanel.detachOnWindowClose(Widget widget), which includes the following assertions:
assert !widgetsToDetach.contains(widget) : "detachOnUnload() called twice "
+ "for the same widget";
assert !isElementChildOfWidget(widget.getElement()) : "A widget that has "
+ "an existing parent widget may not be added to the detach list";
I put some breakpoints in and it seems that the 2nd assertion is failing!
Does anybody have any idea why this might be the case? Should failing this assertion really result in a complete failure of the method (no return)?
Your first approach is good, you just need to register onClick event for your button like this:
DOM.sinkEvents(popupButton.getElement(), Event.ONCLICK);
DOM.setEventListener(popupButton.getElement(), new EventListener() {
#Override
public void onBrowserEvent(Event event) {
//implement the logic after click
}
});
I have checked this, it works 100%!
You might try something like
RootPanel.get("idOfYourMapMarker").add(popupButton);
See RootPanel.get()
Unfortunately, RootPanels are AbsolutePanels which aren't so nice for layout but could work if you just have a simple button to add. You could also try RootLayoutPanel which will give you a LayoutPanel (also not so nice when you just want things to flow). You might end up creating a container widget that does the layout for you, and adding that to the RootPanel.
SimplePanel is a DIV. Perhaps that can be used instead?
You added the element, but you have to keep the hierarchy of the actual GWT Widgets too.
I don't see a clean way to do this, but you could use something like jQuery to grab the button by and ID and add a click handler back to it that would call the original click handler.
private static native void registerEvents(String buttonId, MyClass instance)/*-{
var $ = $wnd.$;
//check click
$('#'+buttonId).live('click', function(e) {
e.preventDefault();
instance.#com.package.MyClass::handleButtonClick(Lcom/google/gwt/event/dom/client/ClickEvent;)(null);
});
}-*/;
Call this registerEvents() either in your onAttach or constructor.
I once had a similar problem. You can use the gwt-openlayer's MapWidget as follows:
private MapWidget createMapWidget() {
final MapOptions defaultMapOptions = new MapOptions();
defaultMapOptions.setDisplayProjection(DEFAULT_PROJECTION);
defaultMapOptions.setNumZoomLevels(TOTAL_ZOOM_LEVELS);
MapWidget mapWidget = new MapWidget(MAP_WIDGET_WIDTH, MAP_WIDGET_HEIGHT, defaultMapOptions);
map = mapWidget.getMap();
return mapWidget;
}
And then add it to any panel be it vertical or horizontal.
MapWidget mapWgt = createMapWidget();
VerticalPanel mainPanel = new VerticalPanel();
mainPanel.add(mapWgt);
...
... add whatever you want
...
You can finally add the created Panel(containing the MapWidget and the gwt widget) to the PopupPanel. Also, you should now be able to add handlers to the gwt button.
Based on the GXT showcase example 'Paging BeanModel Grid' I try to reload the grid when I have done a modifiaction to my data source. I defined the loader like that:
final BasePagingLoader<PagingLoadResult<ModelData>> loader =
new BasePagingLoader<PagingLoadResult<ModelData>>(proxy, new BeanModelReader());
loader.setRemoteSort(true);
The data loads correctly.
When I do:
loader.load();
My paging toolbar just freezes and goes disabled, the grid freezes too and displays what appears to be a loading mask.
I tried to add some events to force a double reload without luck:
grid.addListener(Events.Attach, new Listener<GridEvent<ModelData>>() {
public void handleEvent(GridEvent<ModelData> be) {
loader.load();
}
});
I tried to use the reconfigure(store,cm) option as well and same result.
Any help?
Thanks,
Jordi.
The loading bar grays out so you can see it is working, and the grid may also have a loading message. The code that is working is the server, probably preparing the items.
Set logging messages in your server code (RPC servlet probably), at the beginning and at the end of the call, to see how long they take to run. That is likely where the actual 'freeze' is actually happening, based on the info in your question.
There could be a pause in the browser after that time as well, but in that case the loading circle would stop moving.
To me there is a bug on the grid controller:
Code details:
private final BasePagingLoader<PagingLoadResult<ModelData>> loader;
private Grid<ModelData> grid;
[...]
public ListUsersView(RpcProxy<PagingLoadResult<UserTableEntryBean>> proxy) {
// Create loader
loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy, new BeanModelReader());
loader.setRemoteSort(true);
// Create store
store = new ListStore<ModelData>(loader);
FlowLayout layout = new FlowLayout();
layout.setMargins(new Margins(3, 0, 0, 0));
this.setLayout(layout);
final PagingToolBar toolBar = new PagingToolBar(50);
toolBar.bind(loader);
List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig(UserTableEntryBean.Fields.username.name(), "Username", 100));
columns.add(new ColumnConfig(UserTableEntryBean.Fields.email.name(), "E-mail", 200));
ColumnConfig date = new ColumnConfig(UserTableEntryBean.Fields.creationDate.name(), "Creation date", 100);
date.setDateTimeFormat(DateTimeFormat.getFormat("dd/MM/y"));
columns.add(date);
ColumnModel cm = new ColumnModel(columns);
grid = new Grid<ModelData>(store, cm);
grid.setLoadMask(true);
grid.setBorders(true);
grid.setAutoExpandColumn(UserTableEntryBean.Fields.creationDate.name());
[...]
}
public boolean refreshTable() {
return loader.load();
}