gCubeSystem
/
geoportal-data-viewer-app
15
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added popup

This commit is contained in:
francesco 2020-10-27 10:19:32 +01:00
parent 44dc4c32ca
commit dc4778aca1
11 changed files with 149 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java
View File

@ -60,7 +60,7 @@ public class GeoportalDataViewer implements EntryPoint {
@Override
public void onResize(ResizeEvent event) {
GWT.log("onWindowResized width: "+event.getWidth()+" height: "+event.getHeight());
mainPanel.setHeight(event.getHeight()-200);
mainPanel.setMapHeight(event.getHeight()-200);
}
});

50
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OsmExample.java
View File

@ -2,13 +2,17 @@ package org.gcube.portlets.user.geoportaldataviewer.client.gis;
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Window;
import ol.Collection;
import ol.Coordinate;
import ol.Map;
import ol.MapBrowserEvent;
import ol.MapOptions;
import ol.OLFactory;
import ol.OLUtil;
import ol.Overlay;
import ol.OverlayOptions;
import ol.View;
@ -48,6 +52,7 @@ public class OsmExample {
private ProjectionOptions projectionOptions = OLFactory.createOptions();
private Draw pointDraw;
private Overlay popupOverlay;
/* (non-Javadoc)
* @see de.desjardins.ol3.demo.client.example.Example#show()
@ -119,9 +124,15 @@ public class OsmExample {
@Override
public void onEvent(MapBrowserEvent event) {
// TODO Auto-generated method stub
event.getCoordinate();
addOverlay();
Coordinate coordinate = event.getCoordinate();
if(popupOverlay==null) {
Element elPopup = DOM.getElementById("popup");
popupOverlay = addOverlay(elPopup);
addPopupCloserHandelr(popupOverlay);
}
Element popContent = DOM.getElementById("popup-content");
popContent.setInnerHTML("<p>You clicked here:</p><code>" + coordinate + "</code>");;
popupOverlay.setPosition(coordinate);
}
});
@ -132,9 +143,34 @@ public class OsmExample {
map.addInteraction(new KeyboardZoom());
addWMSLayer();
}
private void addPopupCloserHandelr(Overlay popupOverlay) {
Element elPopupCloser = DOM.getElementById("popup-closer");
Event.sinkEvents(elPopupCloser, Event.ONCLICK);
Event.setEventListener(elPopupCloser, new com.google.gwt.user.client.EventListener() {
@Override
public void onBrowserEvent(Event event) {
if (Event.ONCLICK == event.getTypeInt()) {
popupOverlay.setPosition(null);
}
}
});
}
public static native void handlerPopuCloser(String divId, String overlayId) /*-{
var closer = $doc.getElementById(divId);
var overlay = $doc.getElementById(overlayId);
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
}-*/;
public void addWMSLayer() {
ImageWmsParams imageWMSParams = OLFactory.createOptions();
@ -205,14 +241,16 @@ public class OsmExample {
}
private void addOverlay() {
private Overlay addOverlay(Element element) {
/**
* Create an overlay to anchor the popup to the map.
*/
OverlayOptions overlayOptions = new OverlayOptions();
overlayOptions.setAutoPan(true);
Overlay overlay = new Overlay(overlayOptions);
overlay.setElement(element);
map.addOverlay(overlay);
return overlay;
}

23
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/BasePanel.java
View File

@ -1,23 +0,0 @@
//package org.gcube.portlets.user.geoportaldataviewer.client.ui;
//
//import com.google.gwt.core.client.GWT;
//import com.google.gwt.uibinder.client.UiBinder;
//import com.google.gwt.user.client.ui.Composite;
//import com.google.gwt.user.client.ui.Widget;
//
//public class BasePanel extends Composite {
//
// private static BasePanelUiBinder uiBinder = GWT.create(BasePanelUiBinder.class);
//
// interface BasePanelUiBinder extends UiBinder<Widget, BasePanel> {
// }
//
// public BasePanel() {
// initWidget(uiBinder.createAndBindUi(this));
// }
//
// public BasePanel(String firstName) {
// initWidget(uiBinder.createAndBindUi(this));
// }
//
//}

11
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/BasePanel.ui.xml
View File

@ -1,11 +0,0 @@
<!-- <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.important {
font-weight: bold;
}
</ui:style>
<g:HTMLPanel>
</g:HTMLPanel>
</ui:UiBinder> -->

20
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.java
View File

@ -10,7 +10,6 @@ import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Widget;
public class GeonaDataViewMainPanel extends Composite {
@ -21,7 +20,7 @@ public class GeonaDataViewMainPanel extends Composite {
}
@UiField
Tab mapPanel;
Tab mapTabPanel;
@UiField
Button dataPointSelection;
@ -29,17 +28,14 @@ public class GeonaDataViewMainPanel extends Composite {
@UiField
Button dataBoxSelection;
private HTMLPanel htmlPanel;
private MapPanel mapPanel;
private OsmExample map;
public GeonaDataViewMainPanel() {
initWidget(uiBinder.createAndBindUi(this));
htmlPanel = new HTMLPanel("");
htmlPanel.getElement().setId("map");
htmlPanel.setHeight("600px");
mapPanel.add(htmlPanel);
mapPanel = new MapPanel("600px");
mapTabPanel.add(mapPanel);
dataPointSelection.setToggle(true);
dataBoxSelection.setToggle(true);
@ -47,12 +43,12 @@ public class GeonaDataViewMainPanel extends Composite {
bindHandlers();
}
public void setHeight(int height) {
htmlPanel.setHeight(height +"px");
public void setMapHeight(int height) {
mapPanel.setHeight(height +"px");
}
public HTMLPanel getMapPanel() {
return htmlPanel;
public MapPanel getMapPanel() {
return mapPanel;
}
public void setMap(OsmExample map) {

2
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml
View File

@ -7,7 +7,7 @@
</ui:style>
<g:HTMLPanel ui:field="mainHTMLPanel">
<b:TabPanel ui:field="mainTabPanel" tabPosition="top">
<b:Tab ui:field="mapPanel" active="true" heading="Map">
<b:Tab ui:field="mapTabPanel" active="true" heading="Map">
<b:ButtonToolbar>
<b:ButtonGroup>
<b:Button ui:field="dataPointSelection">Data Point Selection</b:Button>

30
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/MapPanel.java Normal file
View File

@ -0,0 +1,30 @@
package org.gcube.portlets.user.geoportaldataviewer.client.ui;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Widget;
public class MapPanel extends Composite {
private static MapPanelUiBinder uiBinder = GWT.create(MapPanelUiBinder.class);
interface MapPanelUiBinder extends UiBinder<Widget, MapPanel> {
}
@UiField
HTMLPanel mapPanel;
public MapPanel(String height) {
initWidget(uiBinder.createAndBindUi(this));
mapPanel.getElement().setId("map");
mapPanel.setHeight(height);
}
public void setMapHeight(int height) {
mapPanel.setHeight(height +"px");
}
}

17
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/MapPanel.ui.xml Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.map-style {
width: 100%;
}
</ui:style>
<g:HTMLPanel ui:field="mapPanel"
styleName="{style.map-style}">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</g:HTMLPanel>
</ui:UiBinder>

2
src/main/resources/org/gcube/portlets/user/geoportaldataviewer/client/Messages_fr.properties
View File

@ -1,2 +0,0 @@
sendButton = Envoyer
nameField = Entrez votre nom

56
src/main/webapp/GeoportalDataViewer.css
View File

@ -1,25 +1,65 @@
/** Add css rules here for your application. */
/** Most GWT widgets already have a style name defined */
.gwt-DialogBox {
width: 400px;
width: 400px;
}
.dialogVPanel {
margin: 5px;
margin: 5px;
}
.serverResponseLabelError {
color: red;
color: red;
}
/** Set ids using widget.getElement().setId("idOfElement") */
#closeButton {
margin: 15px 6px 6px;
margin: 15px 6px 6px;
}
.map {
height: 100%;
width: 100%;
.ol-popup {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}

3
src/main/webapp/GeoportalDataViewer.html
View File

@ -46,9 +46,6 @@
in order for this application to display correctly.
</div>
</noscript>
<h1>GeoPortal Data Viewer</h1>
<div id="geoportal-data-viewer"></div>
</body>
</html>