added popup
This commit is contained in:
parent
44dc4c32ca
commit
dc4778aca1
|
@ -60,7 +60,7 @@ public class GeoportalDataViewer implements EntryPoint {
|
||||||
@Override
|
@Override
|
||||||
public void onResize(ResizeEvent event) {
|
public void onResize(ResizeEvent event) {
|
||||||
GWT.log("onWindowResized width: "+event.getWidth()+" height: "+event.getHeight());
|
GWT.log("onWindowResized width: "+event.getWidth()+" height: "+event.getHeight());
|
||||||
mainPanel.setHeight(event.getHeight()-200);
|
mainPanel.setMapHeight(event.getHeight()-200);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -2,13 +2,17 @@ package org.gcube.portlets.user.geoportaldataviewer.client.gis;
|
||||||
|
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants;
|
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.Collection;
|
||||||
import ol.Coordinate;
|
import ol.Coordinate;
|
||||||
import ol.Map;
|
import ol.Map;
|
||||||
import ol.MapBrowserEvent;
|
import ol.MapBrowserEvent;
|
||||||
import ol.MapOptions;
|
import ol.MapOptions;
|
||||||
import ol.OLFactory;
|
import ol.OLFactory;
|
||||||
import ol.OLUtil;
|
|
||||||
import ol.Overlay;
|
import ol.Overlay;
|
||||||
import ol.OverlayOptions;
|
import ol.OverlayOptions;
|
||||||
import ol.View;
|
import ol.View;
|
||||||
|
@ -48,6 +52,7 @@ public class OsmExample {
|
||||||
private ProjectionOptions projectionOptions = OLFactory.createOptions();
|
private ProjectionOptions projectionOptions = OLFactory.createOptions();
|
||||||
|
|
||||||
private Draw pointDraw;
|
private Draw pointDraw;
|
||||||
|
private Overlay popupOverlay;
|
||||||
|
|
||||||
/* (non-Javadoc)
|
/* (non-Javadoc)
|
||||||
* @see de.desjardins.ol3.demo.client.example.Example#show()
|
* @see de.desjardins.ol3.demo.client.example.Example#show()
|
||||||
|
@ -119,9 +124,15 @@ public class OsmExample {
|
||||||
@Override
|
@Override
|
||||||
public void onEvent(MapBrowserEvent event) {
|
public void onEvent(MapBrowserEvent event) {
|
||||||
// TODO Auto-generated method stub
|
// TODO Auto-generated method stub
|
||||||
event.getCoordinate();
|
Coordinate coordinate = event.getCoordinate();
|
||||||
addOverlay();
|
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());
|
map.addInteraction(new KeyboardZoom());
|
||||||
|
|
||||||
addWMSLayer();
|
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() {
|
public void addWMSLayer() {
|
||||||
|
|
||||||
ImageWmsParams imageWMSParams = OLFactory.createOptions();
|
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.
|
* Create an overlay to anchor the popup to the map.
|
||||||
*/
|
*/
|
||||||
OverlayOptions overlayOptions = new OverlayOptions();
|
OverlayOptions overlayOptions = new OverlayOptions();
|
||||||
overlayOptions.setAutoPan(true);
|
overlayOptions.setAutoPan(true);
|
||||||
Overlay overlay = new Overlay(overlayOptions);
|
Overlay overlay = new Overlay(overlayOptions);
|
||||||
|
overlay.setElement(element);
|
||||||
map.addOverlay(overlay);
|
map.addOverlay(overlay);
|
||||||
|
return overlay;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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));
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
//}
|
|
|
@ -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> -->
|
|
|
@ -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.UiBinder;
|
||||||
import com.google.gwt.uibinder.client.UiField;
|
import com.google.gwt.uibinder.client.UiField;
|
||||||
import com.google.gwt.user.client.ui.Composite;
|
import com.google.gwt.user.client.ui.Composite;
|
||||||
import com.google.gwt.user.client.ui.HTMLPanel;
|
|
||||||
import com.google.gwt.user.client.ui.Widget;
|
import com.google.gwt.user.client.ui.Widget;
|
||||||
|
|
||||||
public class GeonaDataViewMainPanel extends Composite {
|
public class GeonaDataViewMainPanel extends Composite {
|
||||||
|
@ -21,7 +20,7 @@ public class GeonaDataViewMainPanel extends Composite {
|
||||||
}
|
}
|
||||||
|
|
||||||
@UiField
|
@UiField
|
||||||
Tab mapPanel;
|
Tab mapTabPanel;
|
||||||
|
|
||||||
@UiField
|
@UiField
|
||||||
Button dataPointSelection;
|
Button dataPointSelection;
|
||||||
|
@ -29,17 +28,14 @@ public class GeonaDataViewMainPanel extends Composite {
|
||||||
@UiField
|
@UiField
|
||||||
Button dataBoxSelection;
|
Button dataBoxSelection;
|
||||||
|
|
||||||
|
private MapPanel mapPanel;
|
||||||
private HTMLPanel htmlPanel;
|
|
||||||
|
|
||||||
private OsmExample map;
|
private OsmExample map;
|
||||||
|
|
||||||
public GeonaDataViewMainPanel() {
|
public GeonaDataViewMainPanel() {
|
||||||
initWidget(uiBinder.createAndBindUi(this));
|
initWidget(uiBinder.createAndBindUi(this));
|
||||||
htmlPanel = new HTMLPanel("");
|
mapPanel = new MapPanel("600px");
|
||||||
htmlPanel.getElement().setId("map");
|
mapTabPanel.add(mapPanel);
|
||||||
htmlPanel.setHeight("600px");
|
|
||||||
mapPanel.add(htmlPanel);
|
|
||||||
|
|
||||||
dataPointSelection.setToggle(true);
|
dataPointSelection.setToggle(true);
|
||||||
dataBoxSelection.setToggle(true);
|
dataBoxSelection.setToggle(true);
|
||||||
|
@ -47,12 +43,12 @@ public class GeonaDataViewMainPanel extends Composite {
|
||||||
bindHandlers();
|
bindHandlers();
|
||||||
}
|
}
|
||||||
|
|
||||||
public void setHeight(int height) {
|
public void setMapHeight(int height) {
|
||||||
htmlPanel.setHeight(height +"px");
|
mapPanel.setHeight(height +"px");
|
||||||
}
|
}
|
||||||
|
|
||||||
public HTMLPanel getMapPanel() {
|
public MapPanel getMapPanel() {
|
||||||
return htmlPanel;
|
return mapPanel;
|
||||||
}
|
}
|
||||||
|
|
||||||
public void setMap(OsmExample map) {
|
public void setMap(OsmExample map) {
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
</ui:style>
|
</ui:style>
|
||||||
<g:HTMLPanel ui:field="mainHTMLPanel">
|
<g:HTMLPanel ui:field="mainHTMLPanel">
|
||||||
<b:TabPanel ui:field="mainTabPanel" tabPosition="top">
|
<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:ButtonToolbar>
|
||||||
<b:ButtonGroup>
|
<b:ButtonGroup>
|
||||||
<b:Button ui:field="dataPointSelection">Data Point Selection</b:Button>
|
<b:Button ui:field="dataPointSelection">Data Point Selection</b:Button>
|
||||||
|
|
|
@ -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");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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>
|
|
@ -1,2 +0,0 @@
|
||||||
sendButton = Envoyer
|
|
||||||
nameField = Entrez votre nom
|
|
|
@ -1,25 +1,65 @@
|
||||||
/** Add css rules here for your application. */
|
/** Add css rules here for your application. */
|
||||||
|
|
||||||
/** Most GWT widgets already have a style name defined */
|
/** Most GWT widgets already have a style name defined */
|
||||||
.gwt-DialogBox {
|
.gwt-DialogBox {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialogVPanel {
|
.dialogVPanel {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.serverResponseLabelError {
|
.serverResponseLabelError {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Set ids using widget.getElement().setId("idOfElement") */
|
/** Set ids using widget.getElement().setId("idOfElement") */
|
||||||
#closeButton {
|
#closeButton {
|
||||||
margin: 15px 6px 6px;
|
margin: 15px 6px 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.map {
|
.ol-popup {
|
||||||
height: 100%;
|
position: absolute;
|
||||||
width: 100%;
|
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: "✖";
|
||||||
|
}
|
|
@ -46,9 +46,6 @@
|
||||||
in order for this application to display correctly.
|
in order for this application to display correctly.
|
||||||
</div>
|
</div>
|
||||||
</noscript>
|
</noscript>
|
||||||
|
|
||||||
<h1>GeoPortal Data Viewer</h1>
|
|
||||||
|
|
||||||
<div id="geoportal-data-viewer"></div>
|
<div id="geoportal-data-viewer"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue