Merge pull request 'task_21847' (!1) from task_21847 into master

Reviewed-on: #1

.classpath

@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <classpath>
-	<classpathentry kind="src" output="target/geoportal-data-viewer-app-1.1.0/WEB-INF/classes" path="src/main/java">
+	<classpathentry kind="src" output="target/geoportal-data-viewer-app-1.2.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-1.1.0/WEB-INF/classes" path="src/main/resources">
+	<classpathentry excluding="**" kind="src" output="target/geoportal-data-viewer-app-1.2.0-SNAPSHOT/WEB-INF/classes" path="src/main/resources">
 		<attributes>
 			<attribute name="maven.pomderived" value="true"/>
 		</attributes>
@@ -36,5 +36,5 @@
 		</attributes>
 	</classpathentry>
 	<classpathentry kind="lib" path="/home/francescomangiacrapa/.m2/repository/javax/servlet/javax.servlet-api/3.1.0/javax.servlet-api-3.1.0.jar"/>
-	<classpathentry kind="output" path="target/geoportal-data-viewer-app-1.1.0/WEB-INF/classes"/>
+	<classpathentry kind="output" path="target/geoportal-data-viewer-app-1.2.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-1.1.0
+lastWarOutDir=/home/francescomangiacrapa/git/geoportal-data-viewer-app/target/geoportal-data-viewer-app-1.2.0-SNAPSHOT
 warSrcDir=src/main/webapp
 warSrcDirIsOutput=false

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

@@ -1,58 +1,68 @@
 <?xml version="1.0" encoding="UTF-8"?><project-modules id="moduleCoreId" project-version="1.5.0">
-                            
+                                
     
     
     
     
     
-    <wb-module deploy-name="geoportal-data-viewer-app-1.1.0">
+    
-                                                        
+    <wb-module deploy-name="geoportal-data-viewer-app-1.2.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>
-                        
+                            
+
 
 
 

CHANGELOG.md

@@ -4,6 +4,14 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+
+## [v1.2.0-SNAPSHOT] - 2021-07-19
+
+#### Enhancements
+
+[#21847] Integrated with an Image and LighBox gallery for images
+Moved to maven-portal-bom 3.6.3
+
 ## [v1.1.0] - 2020-12-21
 
 #### Enhancements

pom.xml

@@ -14,7 +14,7 @@
 	<groupId>org.gcube.portlets.user</groupId>
 	<artifactId>geoportal-data-viewer-app</artifactId>
 	<packaging>war</packaging>
-	<version>1.1.0</version>
+	<version>1.2.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>
 
@@ -54,7 +54,7 @@
 			<dependency>
 				<groupId>org.gcube.distribution</groupId>
 				<artifactId>maven-portal-bom</artifactId>
-				<version>3.6.0</version>
+				<version>3.6.3-SNAPSHOT</version>
 				<type>pom</type>
 				<scope>import</scope>
 				<exclusions>
@@ -109,6 +109,16 @@
 			<version>${gwt.version}</version>
 			<scope>provided</scope>
 		</dependency>
+		<dependency>
+			<groupId>org.gcube.portal</groupId>
+			<artifactId>oidc-library-portal</artifactId>
+			<scope>provided</scope>
+		</dependency>
+		<dependency>
+			<groupId>org.gcube.common</groupId>
+			<artifactId>oidc-library</artifactId>
+			<scope>provided</scope>
+		</dependency>
 		<dependency>
 			<groupId>com.github.tdesjardins</groupId>
 			<artifactId>gwt-ol3</artifactId>

src/main/java/org/gcube/portlets/user/geoportaldataviewer/GeoportalDataViewer.gwt.xml

@@ -11,8 +11,11 @@
 	<inherits name='ol.GwtOL' />
 
 	<inherits name="com.github.gwtbootstrap.Bootstrap" />
-	
+
-	<inherits name='org.gcube.application.geoportalcommon.GeoportalDataCommon' />
+	<inherits
+		name='org.gcube.application.geoportalcommon.GeoportalDataCommon' />
+
+	<inherits name="com.google.gwt.json.JSON" />
 
 	<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
 	<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->

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

@@ -24,6 +24,7 @@ import com.google.gwt.core.client.EntryPoint;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.Scheduler;
 import com.google.gwt.core.client.Scheduler.ScheduledCommand;
+import com.google.gwt.core.client.ScriptInjector;
 import com.google.gwt.event.logical.shared.ResizeEvent;
 import com.google.gwt.event.logical.shared.ResizeHandler;
 import com.google.gwt.event.shared.HandlerManager;
@@ -93,10 +94,13 @@ public class GeoportalDataViewer implements EntryPoint {
 			@Override
 			public void execute() {
 
-				olMapMng = new OLMapManager(mainPanel.getMapPanel().getElement().getId(),layerManager.getLayerManagerBus());
+				olMapMng = new OLMapManager(mainPanel.getMapPanel().getElement().getId(),
+						layerManager.getLayerManagerBus());
 				layerManager.setOlMap(olMapMng.getOLOSMMap());
 				mainPanel.setMap(olMapMng.getOLOSMMap());
 				updateSize();
+				ScriptInjector.fromUrl("//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/jquery.nanogallery2.min.js")
+						.setWindow(ScriptInjector.TOP_WINDOW).inject();
 			}
 		});
 
@@ -109,74 +113,84 @@ public class GeoportalDataViewer implements EntryPoint {
 
 		paramWmsRequest = Window.Location.getParameter(GeoportalDataViewerConstants.GET_WMS_PARAMETER);
 		paramGeonaItemType = Window.Location.getParameter(GeoportalDataViewerConstants.GET_GEONA_ITEM_TYPE);
-		//paramUUID = Window.Location.getParameter(GeoportalDataViewerConstants.GET_UUID_PARAMETER);
+		// paramUUID =
+		// Window.Location.getParameter(GeoportalDataViewerConstants.GET_UUID_PARAMETER);
 		paramGeonaItemID = Window.Location.getParameter(GeoportalDataViewerConstants.GET_GEONA_ITEM_ID);
 		paramLayerTitle = Window.Location.getParameter(GeoportalDataViewerConstants.GET_LAYER_TITLE);
 		GWT.log(GeoportalDataViewerConstants.GET_WMS_PARAMETER + " = " + paramWmsRequest);
 		GWT.log(GeoportalDataViewerConstants.GET_GEONA_ITEM_TYPE + " = " + paramGeonaItemType);
 		GWT.log(GeoportalDataViewerConstants.GET_GEONA_ITEM_ID + " = " + paramGeonaItemID);
-		//GWT.log(GeoportalDataViewerConstants.GET_UUID_PARAMETER + " = " + paramUUID);
+		// GWT.log(GeoportalDataViewerConstants.GET_UUID_PARAMETER + " = " + paramUUID);
 		GWT.log(GeoportalDataViewerConstants.GET_LAYER_TITLE + " = " + paramLayerTitle);
-		
+
-		//VALIDATING THE LONG FORMAT FOR GID
+		// VALIDATING THE LONG FORMAT FOR GID
 		try {
-			if(paramGeonaItemID!=null)
+			if (paramGeonaItemID != null)
 				Long.parseLong(paramGeonaItemID);
-		}catch (Exception e) {
+		} catch (Exception e) {
-			Window.alert("Bad format for parameter "+GeoportalDataViewerConstants.GET_GEONA_ITEM_ID+". It must be a Long");
+			Window.alert("Bad format for parameter " + GeoportalDataViewerConstants.GET_GEONA_ITEM_ID
+					+ ". It must be a Long");
 			paramGeonaItemID = null;
 		}
-		
+
 		Scheduler.get().scheduleDeferred(new ScheduledCommand() {
 
 			@Override
 			public void execute() {
-				GeoportalDataViewerServiceAsync.Util.getInstance().getGeoNaDataViewProfile(new AsyncCallback<GeoNaDataViewerProfile>() {
+				GeoportalDataViewerServiceAsync.Util.getInstance()
+						.getGeoNaDataViewProfile(new AsyncCallback<GeoNaDataViewerProfile>() {
 
-					@Override
+							@Override
-					public void onFailure(Throwable caught) {
+							public void onFailure(Throwable caught) {
-						Window.alert(caught.getMessage());
+								Window.alert(caught.getMessage());
-						
-					}
 
-					@Override
-					public void onSuccess(GeoNaDataViewerProfile profile) {
-						geonaDataViewerProfile = profile;
-						GWT.log("Profile: "+geonaDataViewerProfile);
-						Iterator<String> it;
-						String theItemType = paramGeonaItemType;
-						if(theItemType==null) {
-							it = geonaDataViewerProfile.getMapLayers().keySet().iterator();
-							it.hasNext();
-							theItemType= it.next();
-						}
-					
-						LayerItem layerItem = geonaDataViewerProfile.getMapLayers().get(theItemType);
-						
-						if(layerItem==null) {
-							Window.alert("Not detected any layer with type: "+theItemType);
-							return;
-						}
-						
-						GWT.log("The layerItem is: "+layerItem);
-						layerManager.addLayer(theItemType, null, null, layerItem.getWmsLink(), false, false, null, true);
-						
-						if(paramGeonaItemID!=null) {
-							if(paramGeonaItemType==null) {
-								Window.alert("Missing parameter "+GeoportalDataViewerConstants.GET_GEONA_ITEM_TYPE +" (GeoNa Data Type) where to search the item id: "+paramGeonaItemID);
-								return;
 							}
-							GeoNaItemRef gir = new GeoNaItemRef(new Long(paramGeonaItemID), paramGeonaItemType);
+
-							applicationBus.fireEvent(new ShowDetailsEvent(gir, null, null));
+							@Override
-						}
+							public void onSuccess(GeoNaDataViewerProfile profile) {
-						
+								geonaDataViewerProfile = profile;
-					}
+								GWT.log("Profile: " + geonaDataViewerProfile);
-				});
+								Iterator<String> it;
+								String theItemType = paramGeonaItemType;
+								if (theItemType == null) {
+									it = geonaDataViewerProfile.getMapLayers().keySet().iterator();
+									it.hasNext();
+									theItemType = it.next();
+								}
+
+								LayerItem layerItem = geonaDataViewerProfile.getMapLayers().get(theItemType);
+
+								if (layerItem == null) {
+									Window.alert("Not detected any layer with type: " + theItemType);
+									return;
+								}
+
+								GWT.log("The layerItem is: " + layerItem);
+								layerManager.addLayer(theItemType, null, null, layerItem.getWmsLink(), false, false,
+										null, true);
+
+								if (paramGeonaItemID != null) {
+									if (paramGeonaItemType == null) {
+										Window.alert(
+												"Missing parameter " + GeoportalDataViewerConstants.GET_GEONA_ITEM_TYPE
+														+ " (GeoNa Data Type) where to search the item id: "
+														+ paramGeonaItemID);
+										return;
+									}
+									GeoNaItemRef gir = new GeoNaItemRef(new Long(paramGeonaItemID), paramGeonaItemType);
+									applicationBus.fireEvent(new ShowDetailsEvent(gir, null, null));
+								}
+
+							}
+						});
 			}
 		});
-	
+
 		bindEvents();
+
 	}
+		
+	
 	
 	/**
 	 * Update window size.

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

@@ -0,0 +1,164 @@
+package org.gcube.portlets.user.geoportaldataviewer.client.ui.gallery;
+
+import java.util.List;
+
+import org.gcube.portlets.user.geoportaldataviewer.shared.products.content.WorkspaceContentDV;
+import org.gcube.portlets.user.geoportaldataviewer.shared.products.model.UploadedImageDV;
+
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.json.client.JSONArray;
+import com.google.gwt.json.client.JSONObject;
+import com.google.gwt.json.client.JSONString;
+import com.google.gwt.user.client.Random;
+import com.google.gwt.user.client.ui.HTMLPanel;
+
+
+/**
+ * The Class ImagesGallery.
+ *
+ * @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it)
+ * 
+ * Jul 21, 2021
+ */
+public class ImagesGallery {
+
+	private HTMLPanel galleryPanel;
+	private List<UploadedImageDV> listImages;
+	private String galleryDivId;
+
+	/**
+	 * Show gallery.
+	 *
+	 * @param json_array_images the json array images
+	 */
+	private native void showGallery(JavaScriptObject json_array_images, String galleryDivId) /*-{
+
+		console.log("showing: " + json_array_images)
+		var waitForJQuery = setInterval(
+				function() {
+					if (typeof $wnd.$ != 'undefined') {
+
+						$wnd
+								.$("#"+galleryDivId)
+								.nanogallery2(
+										{
+											thumbnailHeight : '200 XS150 SM150', // RESPONSIVE THUMBNAIL HEIGHT: default=200px, XS resolution=150px, SM resolution=150px
+											thumbnailWidth : '218 XS150 SM150', // RESPONSIVE THUMBNAIL WIDTH:  auto
+											thumbnailAlignment : 'left',
+											thumbnailBorderHorizontal : 0,
+											thumbnailBorderVertical : 0,
+											thumbnailGutterWidth : '10 XS10 SM10',
+											thumbnailGutterHeight : '10 XS10 SM10',
+
+											// THUMBNAIL TOOLS & LABEL
+											thumbnailLabel : {
+												display : true,
+												position : 'onBottom',
+												align : 'left'
+											},
+											thumbnailToolbarImage : {
+												bottomLeft : 'display'
+											},
+											// replace the default DISPLAY tool icon
+											icons : {
+												thumbnailDisplay : '<i class="fa fa-long-arrow-right" aria-hidden="true"></i> display'
+											},
+
+											// DISPLAY ANIMATION
+											galleryDisplayTransition : 'slideUp',
+											galleryDisplayTransitionDuration : 1000,
+											thumbnailDisplayTransition : 'scaleDown',
+											thumbnailDisplayTransitionDuration : 300,
+											thumbnailDisplayInterval : 50,
+
+											// THUMBNAIL'S HOVER ANIMATION
+											//thumbnailBuildInit2 : 'tools_font-size_1.5em|title_font-size_1.5em',
+											thumbnailHoverEffect2 : 'imageScaleIn80|tools_opacity_0_1|tools_translateX_-30px_0px|title_opacity_1_0|title_translateX_0px_-30px',
+											touchAnimation : true,
+											touchAutoOpenDelay : 800,
+
+											// GALLERY THEME
+											galleryTheme : {
+												thumbnail : {
+													borderRadius : '2px',
+													background : '#fff',
+													titleShadow : 'none',
+													titleColor : '#696969',
+													labelBackground : '#f3f3f3'
+												},
+												thumbnailIcon : {
+													color : '#000',
+													shadow : 'none'
+												},
+											},
+											viewerToolbar : {
+												display : true,
+												standard : 'minimizeButton, label',
+												minimized : 'minimizeButton, label, fullscreenButton, downloadButton'
+											},
+											viewerTools : {
+												topLeft : 'pageCounter',
+												topRight : 'playPauseButton, zoomButton, fullscreenButton, downloadButton, closeButton'
+											},
+
+											// DEEP LINKING
+											locationHash : false,
+											items : json_array_images
+										})
+
+						clearInterval(waitForJQuery);
+					}
+				}, 200);
+
+	}-*/;
+
+	/**
+	 * Instantiates a new images gallery.
+	 *
+	 * @param immagini the immagini
+	 */
+	public ImagesGallery(List<UploadedImageDV> immagini) {
+		this.galleryDivId = "nanogallery"+Random.nextInt()+Random.nextInt();
+		this.galleryPanel = new HTMLPanel("<div id='"+galleryDivId+"'></div>");
+		this.listImages = immagini;
+	}
+
+	/**
+	 * Gets the gallery panel.
+	 *
+	 * @return the gallery panel
+	 */
+	public HTMLPanel getGalleryPanel() {
+		return galleryPanel;
+	}
+
+	/**
+	 * Fill gallery.
+	 */
+	public void fillGallery() {
+
+		JSONArray jsonArray = new JSONArray();
+		int index = 0;
+		for (UploadedImageDV image : listImages) {
+			for (WorkspaceContentDV imageContent : image.getListWsContent()) {
+				JSONObject json = new JSONObject();
+				json.put("src", new JSONString(imageContent.getLink()));
+				json.put("srct", new JSONString(imageContent.getLink()));
+				List<String> listAuthors = image.getResponsabili();
+				String txtAuthors = listAuthors.size()>1 ? "Authors: ": "Author: ";
+				for (String author : listAuthors) {
+					txtAuthors+= " "+author +",";
+				}
+				txtAuthors = txtAuthors.substring(0,txtAuthors.length()-2);
+				String description = txtAuthors + ". ID Licenza: "+image.getLicenseID();
+				json.put("title", new JSONString(image.getDidascalia()));
+				json.put("description", new JSONString(description));
+				json.put("downloadURL", new JSONString(imageContent.getLink()));
+				jsonArray.set(index, json);
+				index++;
+			}
+
+		}
+		showGallery(jsonArray.getJavaScriptObject(), galleryDivId);
+	}
+}

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.java

@@ -1,5 +1,6 @@
 package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni;
 
+import java.util.ArrayList;
 import java.util.List;
 
 import org.gcube.application.geoportalcommon.shared.GeoNaItemRef;
@@ -8,7 +9,7 @@ import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerSer
 import org.gcube.portlets.user.geoportaldataviewer.client.gis.MapUtils;
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.ModalWindow;
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.dialogs.DialogShareableLink;
-import org.gcube.portlets.user.geoportaldataviewer.client.ui.images.ThumbnailImageView;
+import org.gcube.portlets.user.geoportaldataviewer.client.ui.gallery.ImagesGallery;
 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.ConcessioneDV;
@@ -318,27 +319,28 @@ public class ConcessioneView extends Composite {
 	}
 
 	private void addUploadedImages() {
+		GWT.log("Managing immagini: "+concessioneDV.getImmaginiRappresentative());
 		List<UploadedImageDV> immagini = concessioneDV.getImmaginiRappresentative();
 		if (immagini != null && immagini.size() > 0) {
 			imagesPanel.setVisible(true);
-			boolean addedImage = false;
+			
-			imagesPanel.add(thumbNails);
+			List<UploadedImageDV> immaginiToShow = new ArrayList<UploadedImageDV>();
+			//SHOWING ONLY OPEN IMAGES OR IF THE USER IS LOGGED
 			for (UploadedImageDV uploadedImageDV : immagini) {
 				
 				if(uploadedImageDV.getPolicy()==null || uploadedImageDV.getPolicy().equalsIgnoreCase("OPEN")) {
-					thumbNails.add(new ThumbnailImageView(uploadedImageDV, viewImageButtonVisible, openImageButtonVisible));
+					immaginiToShow.add(uploadedImageDV);
-					addedImage = true;
 				}else {
 					if(myLogin!=null) {
-						thumbNails.add(new ThumbnailImageView(uploadedImageDV, viewImageButtonVisible, openImageButtonVisible));
+						immaginiToShow.add(uploadedImageDV);
-						addedImage = true;
 					}
 				}
-				
 			}
 			
-			if(!addedImage) {
+			if(immaginiToShow.size()>0) {
-				imagesPanel.remove(thumbNails);
+				ImagesGallery gallery = new ImagesGallery(immaginiToShow);
+				imagesPanel.add(gallery.getGalleryPanel());
+				gallery.fillGallery();
 			}
 		}
 	}

src/main/resources/org/gcube/portlets/user/geoportaldataviewer/GeoportalDataViewer.gwt.xml

@@ -11,8 +11,11 @@
 	<inherits name='ol.GwtOL' />
 
 	<inherits name="com.github.gwtbootstrap.Bootstrap" />
-	
+
-	<inherits name='org.gcube.application.geoportalcommon.GeoportalDataCommon' />
+	<inherits
+		name='org.gcube.application.geoportalcommon.GeoportalDataCommon' />
+
+	<inherits name="com.google.gwt.json.JSON" />
 
 	<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
 	<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->

src/main/webapp/GeoportalDataViewer.css

@@ -230,4 +230,27 @@ body {
 .info-interaction  .gwt-Label {
 	font-weight: bold;
 	padding-bottom: 5px;
-}
+}
+
+
+
+/** NanoGallery2 **/
+
+.nGY2Viewer {
+	background: rgba(4, 4, 4, .8) !important;
+}
+
+.nGY2Viewer .toolbarBackground {
+	background: rgba(4, 4, 4, .8) !important;
+}
+
+
+.nGY2 .toolbar .ngbt {
+	font-size: 1em !important;
+	padding: 12px 12px !important;
+}
+
+.nGY2 .toolbar .label .title {
+	font-size: .9em !important;
+	margin-bottom: 5px !important
+}

src/main/webapp/GeoportalDataViewer.html

@@ -6,46 +6,56 @@
 <!-- differences in layout.                        -->
 
 <html>
-  <head>
+<head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
-    <!--                                                               -->
+<link
-    <!-- Consider inlining CSS to reduce the number of requested files -->
+	href="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css"
-    <!--                                                               -->
+	rel="stylesheet" type="text/css">
-    <link type="text/css" rel="stylesheet" href="GeoportalDataViewer.css">
+<script
-    
+	src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"
-    <link href="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" rel="stylesheet" type="text/css">
+	type="text/javascript"></script>
-    <script src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" type="text/javascript"></script>
-    <!--                                           -->
-    <!-- Any title is fine                         -->
-    <!--                                           -->
-    <title>Web Application Starter Project</title>
 
-    <!--                                           -->
+<link
-    <!-- This script loads your compiled module.   -->
+	href="//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/css/nanogallery2.min.css"
-    <!-- If you add any GWT meta tags, they must   -->
+	rel="stylesheet" type="text/css">
-    <!-- be added before this line.                -->
-    <!--                                           -->
-    <script type="text/javascript" language="javascript" src="GeoportalDataViewer/GeoportalDataViewer.nocache.js"></script>
-  </head>
 
-  <!--                                           -->
+<!--                                                               -->
-  <!-- The body can have arbitrary html, or      -->
+<!-- Consider inlining CSS to reduce the number of requested files -->
-  <!-- you can leave the body empty if you want  -->
+<!--                                                               -->
-  <!-- to create a completely dynamic UI.        -->
+<link type="text/css" rel="stylesheet" href="GeoportalDataViewer.css">
-  <!--                                           -->
+<!--                                           -->
-  <body>
+<!-- Any title is fine                         -->
+<!--                                           -->
+<title>Web Application Starter Project</title>
 
-    <!-- OPTIONAL: include this if you want history support -->
+<!--                                           -->
-    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
+<!-- This script loads your compiled module.   -->
+<!-- If you add any GWT meta tags, they must   -->
+<!-- be added before this line.                -->
+<!--                                           -->
+<script type="text/javascript" language="javascript"
+	src="GeoportalDataViewer/GeoportalDataViewer.nocache.js"></script>
+</head>
 
-    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
+<!--                                           -->
-    <noscript>
+<!-- The body can have arbitrary html, or      -->
-      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
+<!-- you can leave the body empty if you want  -->
-        Your web browser must have JavaScript enabled
+<!-- to create a completely dynamic UI.        -->
-        in order for this application to display correctly.
+<!--                                           -->
-      </div>
+<body>
-    </noscript>
+
-   <div id="geoportal-data-viewer"></div>
+	<!-- OPTIONAL: include this if you want history support -->
-  </body>
+	<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
+		style="position: absolute; width: 0; height: 0; border: 0"></iframe>
+
+	<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
+	<noscript>
+		<div
+			style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
+			Your web browser must have JavaScript enabled in order for this
+			application to display correctly.</div>
+	</noscript>
+	<div id="geoportal-data-viewer"></div>
+</body>
 </html>

src/main/webapp/WEB-INF/jsp/GeoPortalDataViewerAppPortlet_view.jsp

@@ -22,6 +22,10 @@
 	src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"
 	type="text/javascript"></script>
 
+<link
+	href="//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/css/nanogallery2.min.css"
+	rel="stylesheet" type="text/css">
+
 <link rel="stylesheet"
 	href="<%=request.getContextPath()%>/GeoportalDataViewer.css"
 	type="text/css">
@@ -29,4 +33,5 @@
 <script type="text/javascript"
 	src="<%=request.getContextPath()%>/GeoportalDataViewer/GeoportalDataViewer.nocache.js"></script>
 
+
 <div id="geoportal-data-viewer"></div>