improved the interactions on Map and the view with details

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;
 			
 
 }

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);
 			}
 		});

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);
 
 	}
 

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);

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;
+	}
 	</ui:style>
 	<g:HTMLPanel ui:field="mainHTMLPanel">
 		<g:HTMLPanel ui:field="mainContainerPanel">
 			<g:HTMLPanel ui:field="mainToolBar"
 				addStyleNames="inner-toolbar">
-				<b:DropdownButton type="LINK" text="Query" visible="false">
+				<b:DropdownButton type="LINK" text=" " icon="INFO">
+					<g:HTMLPanel ui:field="panelMI"
+						addStyleNames="info-interaction">
+						<g:Label>Map Interaction</g:Label>
+						<b:Paragraph><b:Icon type="CHECK_EMPTY"/> Use <code>Shift+Drag</code> to draw an extent for zoom in the Map</b:Paragraph>
+						<b:Paragraph><b:Icon type="HAND_UP"/> Click on the Points shown on the Map to view their features</b:Paragraph>
+						</g:HTMLPanel>
+				</b:DropdownButton>
+				<b:DropdownButton type="LINK" text="Query"
+					visible="false">
 					<!-- <b:ButtonGroup toggle="checkbox" ui:field="buttonGroup"> -->
 					<b:NavLink ui:field="dataPointSelection"
 						addStyleNames="{style.margin-right-10}">Data Point

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");

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();
 				}
 				

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");
 			}
 		});
 	}

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%;
 	}
 	</ui:style>
-	<g:HTMLPanel>
+	<g:HTMLPanel addStyleNames="{style.map-style}">
 		<g:HTMLPanel ui:field="theMap"
 			addStyleNames="{style.internalMap}">
 		</g:HTMLPanel>

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);

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%;
+	}
+	
 	</ui:style>
 	<g:HTMLPanel ui:field="pageViewDetails">
 		<!-- <g:HTMLPanel ui:field="sharePanel" -->
@@ -32,7 +37,7 @@
 			<b:Button ui:field="viewButton">View</b:Button>
 		</g:HorizontalPanel>
 		<b:Paragraph ui:field="introduzione"></b:Paragraph>
-		<g:HorizontalPanel>
+		<g:HorizontalPanel addStyleNames="{style.width-100}">
 			<g:HTMLPanel ui:field="concessioniPanel">
 			</g:HTMLPanel>
 			<g:HTMLPanel ui:field="mapViewPanel">

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());

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;
-	}
 	</ui:style>
-	<g:HTMLPanel addStyleNames="{style.style-layer}">
+	<g:HTMLPanel addStyleNames="style-layer">
 		<g:HorizontalPanel>
 			<g:HTMLPanel ui:field="layerConcessionePanel"></g:HTMLPanel>
 			<g:HTMLPanel ui:field="mapViewPanel">

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;
 }