From dc4778aca1f2fd0ad0f99ad7cd4b3d3c3fa30cbe Mon Sep 17 00:00:00 2001 From: francesco Date: Tue, 27 Oct 2020 10:19:32 +0100 Subject: [PATCH] added popup --- .../client/GeoportalDataViewer.java | 2 +- .../client/gis/OsmExample.java | 50 +++++++++++++++-- .../client/ui/BasePanel.java | 23 -------- .../client/ui/BasePanel.ui.xml | 11 ---- .../client/ui/GeonaDataViewMainPanel.java | 20 +++---- .../client/ui/GeonaDataViewMainPanel.ui.xml | 2 +- .../client/ui/MapPanel.java | 30 ++++++++++ .../client/ui/MapPanel.ui.xml | 17 ++++++ .../client/Messages_fr.properties | 2 - src/main/webapp/GeoportalDataViewer.css | 56 ++++++++++++++++--- src/main/webapp/GeoportalDataViewer.html | 3 - 11 files changed, 149 insertions(+), 67 deletions(-) delete mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/BasePanel.java delete mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/BasePanel.ui.xml create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/MapPanel.java create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/MapPanel.ui.xml delete mode 100644 src/main/resources/org/gcube/portlets/user/geoportaldataviewer/client/Messages_fr.properties diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java index d7d84c4..d59721e 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java @@ -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); } }); diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OsmExample.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OsmExample.java index 5929e71..46f6662 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OsmExample.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OsmExample.java @@ -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("

You clicked here:

" + coordinate + "");; + 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; } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/BasePanel.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/BasePanel.java deleted file mode 100644 index 04eb21d..0000000 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/BasePanel.java +++ /dev/null @@ -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 { -// } -// -// public BasePanel() { -// initWidget(uiBinder.createAndBindUi(this)); -// } -// -// public BasePanel(String firstName) { -// initWidget(uiBinder.createAndBindUi(this)); -// } -// -//} diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/BasePanel.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/BasePanel.ui.xml deleted file mode 100644 index 0b8562b..0000000 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/BasePanel.ui.xml +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.java index 831439f..6a3ef2b 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.java @@ -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) { diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml index aa80f09..79a7424 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml @@ -7,7 +7,7 @@ - + Data Point Selection diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/MapPanel.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/MapPanel.java new file mode 100644 index 0000000..d1eeca6 --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/MapPanel.java @@ -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 { + } + + @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"); + } + +} diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/MapPanel.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/MapPanel.ui.xml new file mode 100644 index 0000000..6b2836f --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/MapPanel.ui.xml @@ -0,0 +1,17 @@ + + + + + .map-style { + width: 100%; + } + + + + + \ No newline at end of file diff --git a/src/main/resources/org/gcube/portlets/user/geoportaldataviewer/client/Messages_fr.properties b/src/main/resources/org/gcube/portlets/user/geoportaldataviewer/client/Messages_fr.properties deleted file mode 100644 index b4a7627..0000000 --- a/src/main/resources/org/gcube/portlets/user/geoportaldataviewer/client/Messages_fr.properties +++ /dev/null @@ -1,2 +0,0 @@ -sendButton = Envoyer -nameField = Entrez votre nom \ No newline at end of file diff --git a/src/main/webapp/GeoportalDataViewer.css b/src/main/webapp/GeoportalDataViewer.css index 9acd7ab..66415e2 100644 --- a/src/main/webapp/GeoportalDataViewer.css +++ b/src/main/webapp/GeoportalDataViewer.css @@ -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: "✖"; +} \ No newline at end of file diff --git a/src/main/webapp/GeoportalDataViewer.html b/src/main/webapp/GeoportalDataViewer.html index 007f5fa..38a20f0 100644 --- a/src/main/webapp/GeoportalDataViewer.html +++ b/src/main/webapp/GeoportalDataViewer.html @@ -46,9 +46,6 @@ in order for this application to display correctly. - -

GeoPortal Data Viewer

-