.classpath

@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <classpath>
-	<classpathentry kind="src" output="target/geoportal-data-viewer-app-2.0.0/WEB-INF/classes" path="src/main/java">
+	<classpathentry kind="src" output="target/geoportal-data-viewer-app-2.1.0-SNAPSHOT/WEB-INF/classes" path="src/main/java">
 		<attributes>
 			<attribute name="optional" value="true"/>
 			<attribute name="maven.pomderived" value="true"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry excluding="**" kind="src" output="target/geoportal-data-viewer-app-2.0.0/WEB-INF/classes" path="src/main/resources">
+	<classpathentry excluding="**" kind="src" output="target/geoportal-data-viewer-app-2.1.0-SNAPSHOT/WEB-INF/classes" path="src/main/resources">
 		<attributes>
 			<attribute name="maven.pomderived" value="true"/>
 		</attributes>
@@ -35,5 +35,5 @@
 			<attribute name="org.eclipse.jst.component.dependency" value="/WEB-INF/lib"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry kind="output" path="target/geoportal-data-viewer-app-2.0.0/WEB-INF/classes"/>
+	<classpathentry kind="output" path="target/geoportal-data-viewer-app-2.1.0-SNAPSHOT/WEB-INF/classes"/>
 </classpath>

.settings/com.gwtplugins.gdt.eclipse.core.prefs

@@ -1,4 +1,4 @@
 eclipse.preferences.version=1
-lastWarOutDir=/home/francescomangiacrapa/git/geoportal-data-viewer-app/target/geoportal-data-viewer-app-2.0.0
+lastWarOutDir=/home/francescomangiacrapa/git/geoportal-data-viewer-app/target/geoportal-data-viewer-app-2.1.0-SNAPSHOT
 warSrcDir=src/main/webapp
 warSrcDirIsOutput=false

.settings/org.eclipse.wst.common.component

@@ -1,21 +1,31 @@
 <?xml version="1.0" encoding="UTF-8"?><project-modules id="moduleCoreId" project-version="1.5.0">
         	
-    <wb-module deploy-name="geoportal-data-viewer-app-2.0.0">
+    
+    <wb-module deploy-name="geoportal-data-viewer-app-2.1.0-SNAPSHOT">
+                		
         
         <wb-resource deploy-path="/" source-path="/target/m2e-wtp/web-resources"/>
                 		
+        
         <wb-resource deploy-path="/" source-path="/src/main/webapp" tag="defaultRootSource"/>
                 		
+        
         <wb-resource deploy-path="/WEB-INF/classes" source-path="/target/generated-sources/gwt"/>
                 		
+        
         <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/java"/>
                 		
+        
         <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/resources"/>
                 		
+        
         <property name="java-output-path" value="/geoportal-data-viewer-app/target/geoportal-data-viewer-app-0.0.1-SNAPSHOT/WEB-INF/classes"/>
                 		
+        
         <property name="context-root" value="geoportal-data-viewer-app"/>
                 	
+    
     </wb-module>
         
+
 </project-modules>

CHANGELOG.md

@@ -10,6 +10,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 #### Enhancements
 
 - [#22370] Use a max-height for preview image shown in the pop-up
+- Moved to gwt-ol3 v8.1.0-gwt2_9
 
 ## [v2.0.1] - 2021-11-10
 

pom.xml

@@ -14,7 +14,7 @@
 	<groupId>org.gcube.portlets.user</groupId>
 	<artifactId>geoportal-data-viewer-app</artifactId>
 	<packaging>war</packaging>
-	<version>2.0.1</version>
+	<version>2.1.0-SNAPSHOT</version>
 	<name>GeoPortal Data Viewer App</name>
 	<description>The GeoPortal Data Viewer App is an application to access, discovery and navigate the GeoNa products by a Web-Map Interface</description>
 
@@ -122,7 +122,7 @@
 		<dependency>
 			<groupId>com.github.tdesjardins</groupId>
 			<artifactId>gwt-ol3</artifactId>
-			<version>8.0.0-gwt2_9</version>
+			<version>8.1.0-gwt2_9</version>
 		</dependency>
 		<dependency>
 			<groupId>com.github.gwtbootstrap</groupId>

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

@@ -43,6 +43,7 @@ import com.google.gwt.event.shared.HandlerManager;
 import com.google.gwt.user.client.Timer;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.rpc.AsyncCallback;
+import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.RootPanel;
 
 import ol.Coordinate;
@@ -105,6 +106,16 @@ public class GeoportalDataViewer implements EntryPoint {
 						layerManager.getLayerManagerBus());
 				layerManager.setOlMap(olMapMng.getOLOSMMap());
 				mainPanel.setMap(olMapMng.getOLOSMMap());
+				
+				
+				String attributionHTML = "<div class='map-credits'><div class='map-attribution-container'>"
+						+olMapMng.getOLOSMMap().getMapAttribution()+
+						"</div></div>";
+				
+
+				RootPanel.get(APP_DIV).add(new HTML(attributionHTML));
+				
+				//mainPanel.setMapAttribution(olMapMng.getOLOSMMap().getMapAttribution());
 				updateSize();
 				ScriptInjector.fromUrl("//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/jquery.nanogallery2.min.js")
 						.setWindow(ScriptInjector.TOP_WINDOW).inject();

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/OLMapManager.java

@@ -40,7 +40,6 @@ public class OLMapManager {
 	public static final Double LAYER_DETAIL_MIN_RESOLUTION = 0.01;
 	public static final Double LAYER_DETAIL_MAX_RESOLUTION = 18.5;
 
-
 	/**
 	 * Instantiates a new OL map manager.
 	 *

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/MapUtils.java

@@ -2,6 +2,7 @@ package org.gcube.portlets.user.geoportaldataviewer.client.gis;
 
 import ol.Collection;
 import ol.Coordinate;
+import ol.control.Attribution;
 import ol.control.Control;
 import ol.control.FullScreen;
 import ol.control.MousePosition;
@@ -32,6 +33,10 @@ public final class MapUtils {
         MousePosition mousePosition = new MousePosition();
         mousePosition.setCoordinateFormat(Coordinate.createStringXY(5));
         controls.push(mousePosition);
+        
+		Attribution attribution = new Attribution();
+		attribution.setCollapsed(true);
+		controls.push(attribution);
         //controls.push(new ZoomToExtent());
 
     }

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java

@@ -8,6 +8,7 @@ import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerCon
 import org.gcube.portlets.user.geoportaldataviewer.client.events.AddedLayerToMapEvent;
 import org.gcube.portlets.user.geoportaldataviewer.client.events.AddedLayerToMapEvent.LAYER_TYPE;
 import org.gcube.portlets.user.geoportaldataviewer.client.events.DoActionOnDetailLayersEvent.SwapLayer;
+import org.gcube.portlets.user.geoportaldataviewer.shared.gis.BaseMapLayer;
 import org.gcube.portlets.user.geoportaldataviewer.shared.gis.LayerItem;
 
 import com.google.gwt.core.client.GWT;
@@ -35,7 +36,6 @@ import ol.OverlayOptions;
 import ol.Size;
 import ol.View;
 import ol.ViewOptions;
-import ol.control.Attribution;
 import ol.event.EventListener;
 import ol.geom.Geometry;
 import ol.interaction.Draw;
@@ -47,6 +47,7 @@ import ol.interaction.KeyboardPan;
 import ol.interaction.KeyboardZoom;
 import ol.layer.Base;
 import ol.layer.Image;
+import ol.layer.Layer;
 import ol.layer.LayerOptions;
 import ol.layer.Tile;
 import ol.layer.VectorLayerOptions;
@@ -58,6 +59,7 @@ import ol.source.ImageWmsParams;
 import ol.source.Osm;
 import ol.source.Source;
 import ol.source.Vector;
+import ol.source.Xyz;
 import ol.source.XyzOptions;
 
 /**
@@ -138,6 +140,10 @@ public abstract class OpenLayerOSM {
 
 	private LinkedHashMap<String, Image> wmsLayerMap;
 
+	private Layer baseLayerTile;
+
+	private String mapAttribution;
+
 	/**
 	 * Instantiates a new open layer OSM.
 	 *
@@ -156,16 +162,6 @@ public abstract class OpenLayerOSM {
 			wmsDetailsLayerZIndex[i] = 1000 + i;
 		}
 
-		// create a OSM-layer
-		XyzOptions xyzOptions = OLFactory.createOptions();
-//		osmSourceOptions.setCrossOrigin("Anonymous");
-//		osmSourceOptions.setTileLoadFunction(null);
-
-		Osm osmSource = new Osm(xyzOptions);
-		LayerOptions osmLayerOptions = OLFactory.createOptions();
-		osmLayerOptions.setSource(osmSource);
-
-		Tile osmLayer = new Tile(osmLayerOptions);
 		// create a projection
 		projectionOptions.setCode(MAP_PROJECTION.EPSG_3857.getName());
 		projectionOptions.setUnits("m");
@@ -184,25 +180,72 @@ public abstract class OpenLayerOSM {
 
 		map = new Map(mapOptions);
 
-		map.addLayer(osmLayer);
+		//map.addLayer(baseLayerTile);
 		// map.addLayer(tileDebugLayer);
 
 		// add some controls
 		map.addControl(OLFactory.createScaleLine());
 		MapUtils.addDefaultControls(map.getControls());
 
-		Attribution attribution = new Attribution();
-		attribution.setCollapsed(true);
-		map.addControl(attribution);
-
 		// add some interactions
 		map.addInteraction(new KeyboardPan());
 		map.addInteraction(new KeyboardZoom());
 		
+		
+		String attribution = "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>";
+		BaseMapLayer baseLayer = new BaseMapLayer(
+				"https://{a-d}.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZDRzY2llbmNlIiwiYSI6ImNpcW1nZjE4MDAwMXNod25rdHJsemRoNTQifQ.YPNkNLb8EzjThpvJl1tg4w",
+				attribution, BaseMapLayer.OL_BASE_MAP.MAPBOX);
+
+		//applying base map
+		changeBaseMap(baseLayer);
+
 		bindEvents();
 
 	}
 
+	public void changeBaseMap(BaseMapLayer baseLayer) {
+
+		BaseMapLayer.OL_BASE_MAP baseMap = baseLayer.getType() == null ? BaseMapLayer.OL_BASE_MAP.OSM
+				: baseLayer.getType();
+		this.mapAttribution = baseLayer.getAttribution();
+
+		try {
+			if (baseLayerTile != null)
+				map.removeLayer(baseLayerTile);
+		} catch (Exception e) {
+			// TODO: handle exception
+		}
+
+		switch (baseMap) {
+		case OSM:
+			XyzOptions xyzOptions = OLFactory.createOptions();
+			Osm osmSource = new Osm(xyzOptions);
+			LayerOptions layerOptions = OLFactory.createOptions();
+			layerOptions.setSource(osmSource);
+			baseLayerTile = new Tile(layerOptions);
+
+			break;
+		case MAPBOX:
+		case OTHER:
+
+			XyzOptions xyzOptions2 = OLFactory.createOptions();
+			Xyz xyz = new Xyz(xyzOptions2);
+			xyz.setAttributions(mapAttribution);
+			xyz.setUrl(baseLayer.getUrl());
+			LayerOptions layerOptions2 = OLFactory.createOptions();
+			layerOptions2.setSource(xyz);
+			baseLayerTile = new Tile(layerOptions2);
+
+			break;
+		}
+
+		// map == null at init time
+		if (map != null)
+			map.addLayer(baseLayerTile);
+
+	}
+
 	/**
 	 * Bind events.
 	 */
@@ -830,14 +873,14 @@ public abstract class OpenLayerOSM {
 		Image layer1 = wmsDetailsLayerMap.get(layerSource);
 		Image layer2 = wmsDetailsLayerMap.get(layerTarget);
 
-		int zIndexS = swapLSource.getPosition()+1;
+		int zIndexS = swapLSource.getPosition() + 1;
-		int zIndexT = swapLTarget.getPosition()+1;
+		int zIndexT = swapLTarget.getPosition() + 1;
-		GWT.log("new zindex source: "+zIndexS+", new zTarget: "+zIndexT);
+		GWT.log("new zindex source: " + zIndexS + ", new zTarget: " + zIndexT);
 		layer1.setZIndex(zIndexT);
 		layer2.setZIndex(zIndexS);
 
-		GWT.log("layer1 source: "+layerSource+", new zIndex: "+layer1.getZIndex());
+		GWT.log("layer1 source: " + layerSource + ", new zIndex: " + layer1.getZIndex());
-		GWT.log("layer1 target: "+layerTarget+", new zIndex: "+layer2.getZIndex());
+		GWT.log("layer1 target: " + layerTarget + ", new zIndex: " + layer2.getZIndex());
 
 	}
 
@@ -852,4 +895,8 @@ public abstract class OpenLayerOSM {
 		return map.get((map.keySet().toArray())[index]);
 	}
 
+	public String getMapAttribution() {
+		return mapAttribution;
+	}
+
 }

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

@@ -12,6 +12,7 @@ import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.ExtentMapUtil.L
 
 import com.github.gwtbootstrap.client.ui.Button;
 import com.github.gwtbootstrap.client.ui.NavLink;
+import com.github.gwtbootstrap.client.ui.Paragraph;
 import com.github.gwtbootstrap.client.ui.constants.IconType;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Style.Unit;
@@ -25,6 +26,7 @@ import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.Image;
+import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.ScrollPanel;
 import com.google.gwt.user.client.ui.Widget;
 
@@ -79,6 +81,9 @@ public class GeonaDataViewMainPanel extends Composite {
 	@UiField
 	ScrollPanel overlayLayersPanel;
 
+	@UiField
+	HTMLPanel panelAttribution;
+
 	private MapPanel mapPanel;
 
 	private OpenLayerOSM map;
@@ -113,7 +118,7 @@ public class GeonaDataViewMainPanel extends Composite {
 		extentToEarth.getElement().appendChild(worldImg.getElement());
 		extentToEarth.setWidth("140px");
 
-		//layersDDB.setToggle(true);
+		// layersDDB.setToggle(true);
 		bindEvents();
 
 	}
@@ -127,9 +132,9 @@ public class GeonaDataViewMainPanel extends Composite {
 
 				GWT.log("layersDDB clicked");
 
-				if(overlayLayersPanel.isVisible()) {
+				if (overlayLayersPanel.isVisible()) {
 					overlayLayersPanel.setVisible(false);
-				}else {
+				} else {
 					overlayLayersPanel.setVisible(true);
 				}
 			}
@@ -153,8 +158,8 @@ public class GeonaDataViewMainPanel extends Composite {
 
 	private void setOverlayPanelMaxHeight() {
 
-		String overlMH = mapPanel.getOffsetHeight()-130+"px";
+		String overlMH = mapPanel.getOffsetHeight() - 130 + "px";
-		GWT.log("overlayLayersPanel maxHeight: "+overlMH);
+		GWT.log("overlayLayersPanel maxHeight: " + overlMH);
 		overlayLayersPanel.getElement().getStyle().setProperty("maxHeight", overlMH);
 	}
 
@@ -286,26 +291,27 @@ public class GeonaDataViewMainPanel extends Composite {
 	 */
 	public void showOverlayLayers(FlowPanel panel) {
 		GWT.log("showOverlayLayers");
-		//layersDDB.setVisible(true);
+		// layersDDB.setVisible(true);
 		overlayLayersPanel.setVisible(true);
 		overlayLayersPanel.clear();
 
 		setOverlayPanelMaxHeight();
 		overlayLayersPanel.add(panel);
-		//layersDDBClickEvent();
+		// layersDDBClickEvent();
 	}
 
 	private void layersDDBClickEvent() {
-		layersDDB.fireEvent( new GwtEvent<ClickHandler>() {
+		layersDDB.fireEvent(new GwtEvent<ClickHandler>() {
-	        @Override
+			@Override
-	        public com.google.gwt.event.shared.GwtEvent.Type<ClickHandler> getAssociatedType() {
+			public com.google.gwt.event.shared.GwtEvent.Type<ClickHandler> getAssociatedType() {
-	        return ClickEvent.getType();
+				return ClickEvent.getType();
-	        }
+			}
-	        @Override
+
-	        protected void dispatch(ClickHandler handler) {
+			@Override
-	            handler.onClick(null);
+			protected void dispatch(ClickHandler handler) {
-	        }
+				handler.onClick(null);
-	   });
+			}
+		});
 	}
 
 	/**
@@ -314,9 +320,17 @@ public class GeonaDataViewMainPanel extends Composite {
 	public void hideOverlayLayers() {
 		GWT.log("hideOverlayLayers");
 		overlayLayersPanel.clear();
-		//layersDDB.setVisible(false);
+		// layersDDB.setVisible(false);
 		overlayLayersPanel.setVisible(false);
-		//layersDDBClickEvent();
+		// layersDDBClickEvent();
+	}
+
+	public void setMapAttribution(String attribution) {
+		panelAttribution.clear();
+		Label label = new Label("Base Map Credits");
+		Paragraph p = new Paragraph(attribution);
+		panelAttribution.add(label);
+		panelAttribution.add(p);
 	}
 
 }

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

@@ -17,7 +17,7 @@
 			<g:HTMLPanel ui:field="mainToolBar"
 				addStyleNames="inner-toolbar">
 				<b:DropdownButton type="LINK" text=" " icon="INFO">
-					<g:HTMLPanel ui:field="panelMI"
+					<g:HTMLPanel ui:field="panelInfo"
 						addStyleNames="info-interaction">
 						<g:Label>Map Interactions</g:Label>
 						<b:Paragraph>
@@ -30,6 +30,9 @@
 							<b:Icon type="HAND_UP" />
 							Click on the Points shown on the Map to view their features
 						</b:Paragraph>
+						<g:HTMLPanel ui:field="panelAttribution"
+						addStyleNames="info-interaction" visible="false">
+						</g:HTMLPanel>
 					</g:HTMLPanel>
 				</b:DropdownButton>
 				<b:DropdownButton type="LINK"

src/main/java/org/gcube/portlets/user/geoportaldataviewer/shared/gis/BaseMapLayer.java

@@ -0,0 +1,109 @@
+package org.gcube.portlets.user.geoportaldataviewer.shared.gis;
+
+import java.io.Serializable;
+
+/**
+ * The Class BaseMapLayer.
+ *
+ * @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
+ * 
+ * Nov 11, 2021
+ */
+public class BaseMapLayer implements Serializable {
+
+	/**
+	 * 
+	 */
+	private static final long serialVersionUID = -6204769725053516674L;
+
+	/**
+	 * The Enum OL_BASE_MAP.
+	 *
+	 * @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
+	 * 
+	 * Nov 11, 2021
+	 */
+	public static enum OL_BASE_MAP {
+		OSM, MAPBOX, OTHER
+	};
+
+	private String url;
+	private String attribution;
+	private OL_BASE_MAP type;
+
+	/**
+	 * Instantiates a new base map layer.
+	 */
+	public BaseMapLayer() {
+
+	}
+
+	/**
+	 * Instantiates a new base map layer.
+	 *
+	 * @param url the url
+	 * @param attribution the attribution
+	 * @param type the type
+	 */
+	public BaseMapLayer(String url, String attribution, OL_BASE_MAP type) {
+		super();
+		this.url = url;
+		this.attribution = attribution;
+		this.type = type;
+	}
+
+	/**
+	 * Gets the url.
+	 *
+	 * @return the url
+	 */
+	public String getUrl() {
+		return url;
+	}
+
+	/**
+	 * Gets the attribution.
+	 *
+	 * @return the attribution
+	 */
+	public String getAttribution() {
+		return attribution;
+	}
+
+	/**
+	 * Gets the type.
+	 *
+	 * @return the type
+	 */
+	public OL_BASE_MAP getType() {
+		return type;
+	}
+
+	/**
+	 * Sets the url.
+	 *
+	 * @param url the new url
+	 */
+	public void setUrl(String url) {
+		this.url = url;
+	}
+
+	/**
+	 * Sets the attribution.
+	 *
+	 * @param attribution the new attribution
+	 */
+	public void setAttribution(String attribution) {
+		this.attribution = attribution;
+	}
+
+	/**
+	 * Sets the type.
+	 *
+	 * @param type the new type
+	 */
+	public void setType(OL_BASE_MAP type) {
+		this.type = type;
+	}
+
+}

src/main/webapp/GeoportalDataViewer.css

@@ -358,3 +358,18 @@ body {
 .range-slider input {
 	width: 280px;
 }
+
+.map-credits {
+	width: 100%;
+	max-height: 25px;
+}
+
+.map-attribution-container {
+	bottom: 0;
+	right: 0;
+	position: absolute;
+	display: block;
+	margin: 10px 5px;
+	padding: 2px 4px;
+	background: white;
+}