fixed CORS issue vs Geoserver

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

@@ -87,11 +87,12 @@ public class LightOpenLayerOSM {
 
 		// create a OSM-layer
 		XyzOptions osmSourceOptions = OLFactory.createOptions();
+		osmSourceOptions.setCrossOrigin("Anonymous");
+//		osmSourceOptions.setTileLoadFunction(null);
 
 		Osm osmSource = new Osm(osmSourceOptions);
 		LayerOptions osmLayerOptions = OLFactory.createOptions();
 		osmLayerOptions.setSource(osmSource);
-
 		Tile osmLayer = new Tile(osmLayerOptions);
 		// create a projection
 		projectionOptions.setCode(MAP_PROJECTION.EPSG_3857.getName());
@@ -198,6 +199,7 @@ public class LightOpenLayerOSM {
 //			imageWMSParams.set("BBOX", bbox.getLowerLeftX()+","+bbox.getLowerLeftY()+","+bbox.getUpperRightX()+","+bbox.getUpperRightY());
 
 		ImageWmsOptions imageWMSOptions = OLFactory.createOptions();
+		imageWMSOptions.setCrossOrigin("Anonymous");
 		imageWMSOptions.setUrl(mapServerHost);
 		imageWMSOptions.setParams(imageWMSParams);
 		// imageWMSOptions.setRatio(1.5f);
@@ -263,13 +265,13 @@ public class LightOpenLayerOSM {
 
 	public java.util.Map<String, String> getLayerURLsProperty() {
 
-		Collection<Base> layers = map.getLayers();
+		Collection<Base> layers = map.getLayerGroup().getLayers();
 		java.util.Map<String, String> mapLayerNameURL = new HashMap<String, String>();
 		if (layers != null) {
 			Base[] layersArr = layers.getArray();
 			for (int i = 0; i < layersArr.length; i++) {
 				Base layer = layersArr[i];
-				// GeoportalDataViewerConstants.printJsObj(layer);
+				//GeoportalDataViewerConstants.printJs(layer.toString());
 				if (layer instanceof Image) {
 					Image layerImage = (Image) layer;
 

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

@@ -140,7 +140,9 @@ public abstract class OpenLayerOSM {
 
 		// create a OSM-layer
 		XyzOptions osmSourceOptions = OLFactory.createOptions();
-
+//		osmSourceOptions.setCrossOrigin("Anonymous");
+//		osmSourceOptions.setTileLoadFunction(null);
+		
 		Osm osmSource = new Osm(osmSourceOptions);
 		LayerOptions osmLayerOptions = OLFactory.createOptions();
 		osmLayerOptions.setSource(osmSource);

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

@@ -52,6 +52,8 @@ public class MapView extends Composite {
 
 	private LightOpenLayerOSM lightOLSM;
 
+	private String theMapId = null;
+
 	/**
 	 * Instantiates a new map view.
 	 *
@@ -60,7 +62,7 @@ public class MapView extends Composite {
 	 */
 	public MapView(Coordinate centerTo, int zoom, String internalMapWidth, String internalMapHeight) {
 		initWidget(uiBinder.createAndBindUi(this));
-		String theMapId = "map" + Random.nextInt();
+		theMapId = "map" + Random.nextInt();
 		theMap.getElement().setId(theMapId);
 		theMap.setWidth(internalMapWidth);
 		theMap.setHeight(internalMapHeight);
@@ -99,6 +101,10 @@ public class MapView extends Composite {
 		});
 	}
 
+	public String getPanelMapElementId() {
+		return theMapId;
+	}
+
 	/**
 	 * Adds the marker.
 	 *

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

@@ -1,5 +1,7 @@
 package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni;
 
+import java.util.ArrayList;
+import java.util.Collection;
 import java.util.Map;
 
 import org.gcube.application.geoportalcommon.shared.products.model.LayerConcessioneDV;
@@ -14,6 +16,8 @@ import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTabl
 import com.github.gwtbootstrap.client.ui.DropdownButton;
 import com.github.gwtbootstrap.client.ui.NavLink;
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Document;
+import com.google.gwt.dom.client.Element;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.uibinder.client.UiBinder;
@@ -69,20 +73,31 @@ public class LayerConcessioneView extends Composite {
 
 			DropdownButton downloadButt = new DropdownButton("download as...");
 			NavLink navLink = new NavLink("PNG");
-			HTML html = new HTML("<a id=\"image-download\" download=\"map.png\"></a>");
+			String htmlLinkId = mapView.getPanelMapElementId() + "-image-download";
-			navLink.getElement().appendChild(html.getElement());
+			final HTML htmlLink = new HTML("<a id=\"" + htmlLinkId + "\" download=\"map.png\"></a>");
+			navLink.getElement().appendChild(htmlLink.getElement());
 			navLink.addClickHandler(new ClickHandler() {
 
 				@Override
 				public void onClick(ClickEvent event) {
-					Map<String, String> mapLayerURLs = mapView.getLightOLSM().getLayerURLsProperty();
+//					Map<String, String> mapLayerURLs = mapView.getLightOLSM().getLayerURLsProperty();
+//					Collection<String> layerURLs = mapLayerURLs.values();
+//					ArrayList<String> layers = new ArrayList<String>(layerURLs);
+//					exportPDF(layers.get(0));
+					
+					
+					
+//					String layerURL = mapLayerURLs.get(layerDV.getLayerName());
+//					GWT.log("layerDV name is: " + layerDV.getLayerName());
+//					if (layerURL != null)
+//						Window.open(layerURL, "_blank", null);
 
-					String layerURL = mapLayerURLs.get(layerDV.getLayerName());
+//					GWT.log("GWT Map panel id: " + mapView.getPanelMapElementId());
-					GWT.log("layerDV name is: " + layerDV.getLayerName());
+//					 Element mapContainer =
-					if (layerURL != null)
+//					 Document.get().getElementById(mapView.getPanelMapElementId());
-						Window.open(layerURL, "_blank", null);
+//					GWT.log("GWT Map panel id: " + mapContainer);
-
+					downloadMap(mapView.getLightOLSM().getMap(), mapView.getPanelMapElementId(), htmlLinkId);
-					//downloadMap(mapView.getLightOLSM().getMap());
+					// mapExport(mapView.getLightOLSM().getMap(), mapView.getPanelMapElementId());
 				}
 			});
 
@@ -92,20 +107,31 @@ public class LayerConcessioneView extends Composite {
 		}
 	}
 
+	public static native void exportPDF(String layerURL) /*-{
+		var image = new Image(layerURL);
+		
+		var doc = new $wnd.jspdf.jsPDF();
+		doc.addImage(layerURL, 'PNG', 0, 0,image.width,image.height);
+		doc.save("map.pdf")
+	}-*/;
+
 	/**
 	 * Prints the.
 	 *
 	 * @param msg the msg
 	 */
-	public static native void downloadMap(ol.Map map)/*-{
+	public static native void downloadMap(ol.Map map, String mapPanelId, String linkId)/*-{
 		console.log("map: " + map);
+
 		map.once('rendercomplete', function() {
-			var mapCanvas = document.createElement('canvas');
+			var mapCanvas = $doc.createElement('canvas');
 			var size = map.getSize();
 			mapCanvas.width = size[0];
 			mapCanvas.height = size[1];
 			var mapContext = mapCanvas.getContext('2d');
-			Array.prototype.forEach.call(document
+			var mapContainer = $doc.querySelector('#'+mapPanelId);
+			//console.log("mapContainer:" +JSON.stringify(mapContainer, null, 4));
+			Array.prototype.forEach.call(mapContainer
 					.querySelectorAll('.ol-layer canvas'), function(canvas) {
 				if (canvas.width > 0) {
 					var opacity = canvas.parentNode.style.opacity;
@@ -125,13 +151,91 @@ public class LayerConcessioneView extends Composite {
 				// link download attribute does not work on MS browsers
 				navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
 			} else {
-				console.log('qui');
+				var link = $doc.getElementById(linkId);
-//				var link = document.getElementById('image-download');
+				link.href = mapCanvas.toDataURL();
-//				link.href = mapCanvas.toDataURL();
+				link.click();
-				window.open(mapCanvas.toDataURL(),'_blank');
 			}
 		});
 		map.renderSync();
 	}-*/;
 
+//	public static native void mapExport(ol.Map map, String mapPanelId)/*-{
+//		try {
+//			var dims = {
+//				a0 : [ 1189, 841 ],
+//				a1 : [ 841, 594 ],
+//				a2 : [ 594, 420 ],
+//				a3 : [ 420, 297 ],
+//				a4 : [ 297, 210 ],
+//				a5 : [ 210, 148 ],
+//			};
+//
+//			var resolutions = {
+//				72 : 72,
+//				150 : 150,
+//				300 : 300,
+//			};
+//
+//			//var format = document.getElementById('format').value;
+//			var format = 'a4';
+//			//var resolution = document.getElementById('resolution').value;
+//			var resolution = resolutions[150];
+//			var dim = dims[format];
+//			var width = Math.round((dim[0] * resolution) / 25.4);
+//			var height = Math.round((dim[1] * resolution) / 25.4);
+//			var size = map.getSize();
+//			var viewResolution = map.getView().getResolution();
+//
+//			map.once('rendercomplete', function() {
+//				var mapCanvas = $doc.createElement('canvas');
+//				mapCanvas.width = width;
+//				mapCanvas.height = height;
+//				var mapContext = mapCanvas.getContext('2d');
+//				var selectId = "#" + mapPanelId;
+//				console.log('selectId: ' + selectId);
+//				var container = $doc.querySelector(selectId);
+//				console.log('container: ' + container);
+//				Array.prototype.forEach.call(container
+//						.querySelectorAll('.ol-layer canvas'),
+//						function(canvas) {
+//							canvas.crossOrigin = "anonymous"; // This enables CORS
+//							if (canvas.width > 0) {
+//								var opacity = canvas.parentNode.style.opacity;
+//								mapContext.globalAlpha = opacity === '' ? 1
+//										: Number(opacity);
+//								var transform = canvas.style.transform;
+//								// Get the transform parameters from the style's transform matrix
+//								var matrix = transform
+//										.match(/^matrix\(([^\(]*)\)$/)[1]
+//										.split(',').map(Number);
+//								// Apply the transform to the export map context
+//								CanvasRenderingContext2D.prototype.setTransform
+//										.apply(mapContext, matrix);
+//								mapContext.drawImage(canvas, 0, 0);
+//							}
+//						});
+//
+//				//window.open(mapCanvas.toDataURL(), '_blank');
+//
+//				var pdf = new $wnd.jspdf.jsPDF('landscape', undefined, format);
+//				pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0,
+//						dim[0], dim[1]);
+//				pdf.save('map.pdf');
+//				// Reset original map size
+//				map.setSize(size);
+//				map.getView().setResolution(viewResolution);
+//				exportButton.disabled = false;
+//				document.body.style.cursor = 'auto';
+//			});
+//			//map.renderSync();
+//	        // Set print size
+//	        var printSize = [width, height];
+//	        map.setSize(printSize);
+//	        var scaling = Math.min(width / size[0], height / size[1]);
+//	        map.getView().setResolution(viewResolution / scaling);
+//		} catch (error) {
+//			window.alert(error);
+//		}
+//	}-*/;
+
 }

src/main/webapp/GeoportalDataViewer.html

@@ -20,6 +20,10 @@
 	href="//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/css/nanogallery2.min.css"
 	rel="stylesheet" type="text/css">
 
+<script
+	src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"
+	type="text/javascript"></script>
+
 <!--                                                               -->
 <!-- Consider inlining CSS to reduce the number of requested files -->
 <!--                                                               -->