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.
Related
i have this requirement on IBM Content Navigator about a personalized (feature) homepage with various buttons used to switch between feature; i've made all works except for the one linked to the Home feature (favorites)
i've already tried to call the feature with thoose params:
params.repositoryId="FNOSARCHIVIO";
params.application="navigator";
params.desktop="OneFile";
params.userid="sys.filenetsvil";
but with no success, the feature is switched (after the button press it switch to the home feature) but it does not load the favorites of the user
here is my switch-feature method (taken for the ibm icn redbook + some modification)
switchFeature: function (featureIdToSwitch) {
//get layout from destop
var layout = ecm.model.desktop.getLayout();
// get the corresponding button of the LaunchBar Container
var feaButt = layout.launchBarContainer.getFeatureButtonByID(featureIdToSwitch);
var params = {};
// params.repositoryId="FNOSARCHIVIO";
// params.application="navigator";
// params.desktop="OneFile";
// params.userid="sys.filenetsvil";
// switching to the target feature
// feaButt.child.loadContent;
layout.launchBarContainer.selectContentPane(feaButt, featureIdToSwitch, params);
}
on the frontend i have 4 simple dojo buttons with onClick action, nothing special.
i use this feature id:
switchToHome: function () {
this.switchFeature('favorites');
},
this is what i mean when i say "it switch the feature but do not load the favorites:"
Home feature called from my button:
https://ibb.co/GMW7L2x
Home feature called from the standard toolbar:
https://ibb.co/BBgr36L
looks like it is loading the feature but it is not calling the listFavorites()
i cannot find any help on IBM docs or forum, any help here ? thanks!
At least i managed to do it, i post it here, hope helps someone:
1- override the default favorite feature (the java class), using the same js plugin, overriding this:
#Override
public String getContentClass() {
return "ecm.widget.layout.HomePane";
}
and set it to preLoaded:
#Override
public boolean isPreLoad() {
return true;
}
then, on the frontend, retrive the js feature, and load the content:
var targetFeature = layout.launchBarContainer.getContentPaneByID(featureIdToSwitch);
targetFeature.loadContent()
you can call the loadContent() only if the feature has been preLoaded or alredy invoke at leat once
I have a problem with my map. I switched to Leaflet 1.2 and one of the functions is not working correctly.
The code is here:
http://mapaszlakow.eu/mapa1.2.html
When activating an overlay which is geojson via js and clicking a bicycle route it zooms in to a route but it is not highlighted and the info window does not show up.
Here is exactly the same example that is working but on the older version of Leaflet (I think it is 0.7).
http://mapaszlakow.eu/
I can't locate the problem, the only thing I did is switching to Leaflet 1.2, I will be greatful for help.
EDIT: I believe, the problem is somewhere here:
function select(layer) {
info.update(layer.feature.properties);
if (selected !== null) {
var previous = selected;
}
map.fitBounds(layer.getBounds());
selected = layer;
if (previous) {
dehighlight(previous);
}
}
var selected = null;
I've tested your code from http://mapaszlakow.eu/mapa1.2.html and it works almost fine - on hover it highlights route correctly, on click it zooms to route extent - except from showing the popup info. To fix this please check out the fiddle I made from your code:
http://jsfiddle.net/5z17y5oL/18/ (this fiddle must be accessed through http because your server doesn't serve data with https)
The main difference is that I passed parameter to info.update(e.feature.properties); occurrences.
EDIT
My edited fiddle is here: http://jsfiddle.net/5z17y5oL/25/
So I moved the info.update(e.feature.properties); to be called from layer click listener. On map clicked layer style is reset and info is clearing as it's receiving null.
.....
onEachFeature: function(feature, layer) {
layer.on({
.....
'click': function(e) {
select(e.target);
info.update(e.feature.properties);
}
});
map.on({
'click': function(e) {
bicyclegeojson.resetStyle(layer);
info.update(null);
selected = null;
}
});
....
//end of EDIT
One more thing - you have small error, you should change this line:
map.addControl(layerControl).addTo(map);
to
map.addControl(layerControl);
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
we have website which is developed in Telidos platform which is using GWT in side it. but
In that website we need print functionality to be included. When the user clicks on print button, then the application should print the search criteria and the content from that page. I don't know how to implement it. I searched in all the places where i couldn't find any solution.
Please help me on this if anybody have any idea.
Jothi, In GWT we have everything in a GWT widget. It may be a RootPanel. VerticalPanel, SplitPanel ans so on. So try this,
For eg. If you to print a CellTable which is added in a VerticalPanel,
VerticalPanel vPanel = new VerticalPanel();
vPanel.add(cellTable);
Then print it by
String printText = vPanel.asWidget().getElement().getInnerHTML();
printMethod(printText);
And have the following method,
public static native void printMethod(String html) /*-{
var frame = $doc.getElementById('printing');
if (!frame) {
$wnd.alert("Error: Can't find printing frame.");
return;
}
frame = frame.contentWindow;
var doc = frame.document;
doc.open();
doc.write(html);
doc.close();
frame.focus();
frame.print();
}-*/;
where 'printing' is the iframe id.
<iframe id="printing" style="width:0;height:0;border:0">
</iframe>
This should be added in your *.ui.xml for the particular widget like
<g:Verticalpanel><iframe id="printing" style="width:0;height:0;border:0">
</iframe></g:Verticalpanel>
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.