From 609f38678ead68cb21fe06f760ca71773c39900d Mon Sep 17 00:00:00 2001 From: "francesco.mangiacrapa" Date: Tue, 24 Nov 2020 11:26:05 +0100 Subject: [PATCH] improved the interactions on Map and the view with details --- .../client/GeoportalDataViewerConstants.java | 4 ++- .../client/LayerManager.java | 3 +- .../client/OLMapManager.java | 2 +- .../client/gis/OpenLayerOSM.java | 2 +- .../client/ui/GeonaDataViewMainPanel.ui.xml | 14 +++++++++- .../client/ui/ModalWindow.java | 1 + .../client/ui/images/ImageView.java | 2 +- .../client/ui/map/MapView.java | 28 +++++++++++++++++-- .../client/ui/map/MapView.ui.xml | 6 +++- .../products/concessioni/ConcessioneView.java | 7 +++-- .../concessioni/ConcessioneView.ui.xml | 7 ++++- .../concessioni/LayerConcessioneView.java | 9 +++++- .../concessioni/LayerConcessioneView.ui.xml | 11 +------- src/main/webapp/GeoportalDataViewer.css | 24 ++++++++++++++++ 14 files changed, 97 insertions(+), 23 deletions(-) diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerConstants.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerConstants.java index 40e510f..aa15343 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerConstants.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerConstants.java @@ -28,7 +28,9 @@ public class GeoportalDataViewerConstants { public static final double ITALY_CENTER_LAT = 42.98; - public static final int ITALY_FIT_ZOOM_ON = 5; + public static final int LIGHT_MAP_ITALY_FIT_ZOOM_ON = 5; + + public static final int MAP_ITALY_FIT_ZOOM_ON = 6; } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/LayerManager.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/LayerManager.java index b6470b4..1c67c32 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/LayerManager.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/LayerManager.java @@ -317,7 +317,7 @@ public class LayerManager { @Override public void onLayerRendered(AddedLayerToMapEvent addedLayerToMapEvent) { - GWT.log("Fired into layerManagerBus"); + GWT.log("Fired into layerManagerBus "+addedLayerToMapEvent); applicationBus.fireEvent(addedLayerToMapEvent); } }); @@ -327,6 +327,7 @@ public class LayerManager { @Override public void onZoomOut(ZoomOutOverMinimumEvent zoomOutEvent) { + GWT.log("Fired into layerManagerBus "+zoomOutEvent); applicationBus.fireEvent(zoomOutEvent); } }); diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/OLMapManager.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/OLMapManager.java index b271ee7..45a1fbd 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/OLMapManager.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/OLMapManager.java @@ -126,7 +126,7 @@ public class OLMapManager { GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857); olMap.setCenter(transformedCenterCoordinate); - olMap.setZoom(GeoportalDataViewerConstants.ITALY_FIT_ZOOM_ON); + olMap.setZoom(GeoportalDataViewerConstants.MAP_ITALY_FIT_ZOOM_ON); } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java index acd8f1e..1136c91 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java @@ -120,7 +120,7 @@ public abstract class OpenLayerOSM { Projection projection = new Projection(projectionOptions); viewOptions.setProjection(projection); viewOptions.setMaxZoom(19); - //viewOptions.setExtent(new Extent(-180, -90, 180, 90)); + // create a view view = new View(viewOptions); 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 e5bf862..35d0ae0 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,12 +7,24 @@ .margin-right-10 { margin-right: 10px; } + .font-weight-bold { + font-weight: bold; + } - + + + Map Interaction + Use Shift+Drag to draw an extent for zoom in the Map + Click on the Points shown on the Map to view their features + + + Data Point diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/ModalWindow.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/ModalWindow.java index efab99a..9e5e2c6 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/ModalWindow.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/ModalWindow.java @@ -34,6 +34,7 @@ public class ModalWindow { modal.setTitle(title); modal.setCloseVisible(true); modal.setWidth(900); + modal.setMaxHeigth(600+"px"); ModalFooter modalFooter = new ModalFooter(); final Button buttClose = new Button("Close"); diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/images/ImageView.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/images/ImageView.java index 7a65676..2a3202f 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/images/ImageView.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/images/ImageView.java @@ -96,7 +96,7 @@ public class ImageView extends Composite { ModalWindow mw = new ModalWindow(StringUtil.ellipsize(imageDV.getTitolo(), 20)); mw.add(new ImageView(imageDV, false, true)); mw.setCaller(ImageView.this); - mw.setWidth(900); + //mw.setWidth(900); mw.show(); } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.java index f8184b8..271e8e3 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.java @@ -51,8 +51,11 @@ import ol.OLFactory; /** * Instantiates a new map view. + * + * @param centerTo the center to + * @param zoom the zoom */ - public MapView() { + public MapView(Coordinate centerTo, int zoom) { initWidget(uiBinder.createAndBindUi(this)); String theMapId = "map"+Random.nextInt(); theMap.getElement().setId(theMapId); @@ -67,7 +70,28 @@ import ol.OLFactory; Coordinate transformedCenterCoordinate = MapUtils.transformCoordiante(centerCoordinate, GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857); olsm.setCenter(transformedCenterCoordinate); - olsm.setZoom(GeoportalDataViewerConstants.ITALY_FIT_ZOOM_ON); + olsm.setZoom(GeoportalDataViewerConstants.LIGHT_MAP_ITALY_FIT_ZOOM_ON); + //setMapSize(); + + } + }); + } + + private void setMapSize() { + Scheduler.get().scheduleDeferred(new ScheduledCommand() { + + @Override + public void execute() { + int width = theMap.getParent().getOffsetWidth(); + int height = theMap.getParent().getOffsetHeight(); + if(width==0) + width = 300; + + if(height==0) + height = 300; + + GWT.log("Internal Map w: "+width + ", h: "+height); + theMap.setSize(width+"px", height+"px"); } }); } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.ui.xml index e138cce..cab9ad3 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.ui.xml +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.ui.xml @@ -5,9 +5,13 @@ .internalMap { width: 300px; height: 300px; + float: right; + } + .map-style { + width: 100%; } - + diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.java index c8ecbe4..7b7b8de 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.java @@ -33,6 +33,7 @@ import com.google.gwt.user.client.ui.HTMLPanel; import com.google.gwt.user.client.ui.Widget; import ol.Coordinate; +import ol.OLFactory; public class ConcessioneView extends Composite { @@ -203,7 +204,7 @@ public class ConcessioneView extends Composite { ModalWindow mw = new ModalWindow(concessioneDV.getNome()); mw.add(cv); mw.setCaller(ConcessioneView.this); - mw.setWidth(900); + //mw.setWidth(900); mw.show(); } @@ -296,7 +297,9 @@ public class ConcessioneView extends Composite { } private void addCentroidMap() { - MapView mapView = new MapView(); + Coordinate centerCoordinate = OLFactory.createCoordinate(GeoportalDataViewerConstants.ITALY_CENTER_LONG, GeoportalDataViewerConstants.ITALY_CENTER_LAT); + Coordinate transformedCenterCoordinate = MapUtils.transformCoordiante(centerCoordinate, GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857); + MapView mapView = new MapView(transformedCenterCoordinate, GeoportalDataViewerConstants.LIGHT_MAP_ITALY_FIT_ZOOM_ON); Coordinate coord = new Coordinate(concessioneDV.getCentroidLong(), concessioneDV.getCentroidLat()); Coordinate transfCoord = MapUtils.transformCoordiante(coord, GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857); //Coordinate invertedCoordinate = MapUtils.reverseCoordinate(coord); diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.ui.xml index 4c6f680..a71c008 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.ui.xml +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.ui.xml @@ -20,6 +20,11 @@ .margin-bottom-10 { margin-bottom: 10px; } + + .width-100 { + width: 100%; + } + @@ -32,7 +37,7 @@ View - + diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/LayerConcessioneView.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/LayerConcessioneView.java index 8fb9fc3..3c56da1 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/LayerConcessioneView.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/LayerConcessioneView.java @@ -1,6 +1,7 @@ package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni; import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants; +import org.gcube.portlets.user.geoportaldataviewer.client.gis.MapUtils; import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.MapView; import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable; import org.gcube.portlets.user.geoportaldataviewer.shared.products.model.LayerConcessioneDV; @@ -12,6 +13,9 @@ 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 ol.Coordinate; +import ol.OLFactory; + public class LayerConcessioneView extends Composite { private static LayerConcessioneUiBinder uiBinder = GWT.create(LayerConcessioneUiBinder.class); @@ -39,7 +43,10 @@ public class LayerConcessioneView extends Composite { layerConcessionePanel.add(customTable); if(layerDV.getLayerName()!=null && layerDV.getWmsLink()!=null) { - MapView mapView = new MapView(); + Coordinate centerCoordinate = OLFactory.createCoordinate(GeoportalDataViewerConstants.ITALY_CENTER_LONG, GeoportalDataViewerConstants.ITALY_CENTER_LAT); + Coordinate transformedCenterCoordinate = MapUtils.transformCoordiante(centerCoordinate, GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857); + MapView mapView = new MapView(transformedCenterCoordinate, GeoportalDataViewerConstants.LIGHT_MAP_ITALY_FIT_ZOOM_ON); + mapViewPanel.add(mapView); String mapServerHost = layerDV.getWmsLink().contains("?")? layerDV.getWmsLink().substring(0,layerDV.getWmsLink().indexOf("?")):layerDV.getWmsLink(); mapView.addWMSLayer(mapServerHost, layerDV.getLayerName(), layerDV.getBbox()); diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/LayerConcessioneView.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/LayerConcessioneView.ui.xml index 4ed66ae..ec9b977 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/LayerConcessioneView.ui.xml +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/LayerConcessioneView.ui.xml @@ -8,17 +8,8 @@ font-weight: bold; } - .style-layer { - display: inline-block; - border: 1px solid #ddd; - border-radius: 4px; - box-shadow: 0 1px 3px rgba(0,0,0,0.055); - margin-right: 10px; - margin-bottom: 10px; - width: 673px; - } - + diff --git a/src/main/webapp/GeoportalDataViewer.css b/src/main/webapp/GeoportalDataViewer.css index 074e5df..f32ca13 100644 --- a/src/main/webapp/GeoportalDataViewer.css +++ b/src/main/webapp/GeoportalDataViewer.css @@ -201,4 +201,28 @@ body { .inner-toolbar .btn-link:hover, .inner-toolbar .btn-link:focus { background-color: #f3f3f3 !important; text-decoration: none; +} + +.style-layer { + display: inline-block; + border: 1px solid #ddd; + border-radius: 4px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + margin-right: 10px; + margin-bottom: 10px; + width: 100%; +} + +.style-layer table { + width: 100%; +} + +.info-interaction { + padding: 10px; + margin-right: 10px; +} + +.info-interaction .gwt-Label { + font-weight: bold; + padding-bottom: 5px; } \ No newline at end of file