From c471f39d508942600af3877c4cd97a23bbb9c46b Mon Sep 17 00:00:00 2001 From: "francesco.mangiacrapa" Date: Mon, 6 Sep 2021 11:05:43 +0200 Subject: [PATCH] completed download of map image --- .../concessioni/LayerConcessioneView.java | 123 +++++++++++------- 1 file changed, 73 insertions(+), 50 deletions(-) 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 af27a42..61d0409 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,9 +1,5 @@ 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; import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants; import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants.MAP_PROJECTION; @@ -15,9 +11,10 @@ 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.github.gwtbootstrap.client.ui.constants.ButtonType; 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.dom.client.Style; +import com.google.gwt.dom.client.Style.Unit; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.uibinder.client.UiBinder; @@ -45,73 +42,98 @@ public class LayerConcessioneView extends Composite { private CustomFlexTable customTable = new CustomFlexTable(); + private static enum IMAGE_EXPORT_AS { + PNG, JPEG + }; + + int downloadAttempt = 0; + public LayerConcessioneView(LayerConcessioneDV layerDV) { initWidget(uiBinder.createAndBindUi(this)); GWT.log("Showing: " + layerDV); - customTable.addNextKeyValue("Abstract", layerDV.getAbstractSection()); - customTable.addNextKeyValue("Valutazione qualità", layerDV.getValutazioneQualita()); - customTable.addNextKeyValue("Metodo raccolta dati", layerDV.getMetodoRaccoltaDati()); - customTable.addNextKeyValue("Scala acquisizione dati", layerDV.getScalaAcquisizione()); - customTable.addNextKeyValues("Autori", layerDV.getAuthors(), GeoportalDataViewerConstants.NEW_LINE_BR); - layerConcessionePanel.add(customTable); - + DropdownButton exportMapButton = new DropdownButton("Export Map as..."); + exportMapButton.setType(ButtonType.LINK); + exportMapButton.setTitle("Export this map view (OSM + layer) as an image..."); + exportMapButton.setVisible(false); + Style expButton = exportMapButton.getElement().getStyle(); + expButton.setMarginTop(2, Unit.PX); + GWT.log("WMS LINK: " + layerDV.getWmsLink()); if (layerDV.getLayerName() != null && layerDV.getWmsLink() != null) { Location italyLocation = ExtentMapUtil.getLocation(PLACE.ITALY); Coordinate transformedCenterCoordinate = italyLocation.getCoordinate(MAP_PROJECTION.EPSG_3857); -// Coordinate centerCoordinate = OLFactory.createCoordinate(GeoportalDataViewerConstants.ITALY_CENTER_LONG, GeoportalDataViewerConstants.ITALY_CENTER_LAT); -// Coordinate transformedCenterCoordinate = MapUtils.transformCoordiante(centerCoordinate, MAP_PROJECTION.EPSG_4326.getName(), MAP_PROJECTION.EPSG_3857.getName()); MapView mapView = new MapView(transformedCenterCoordinate, GeoportalDataViewerConstants.LIGHT_MAP_ITALY_FIT_ZOOM_ON, "70%", "300px"); - + + exportMapButton.setVisible(true); + mapViewPanel.add(exportMapButton); mapViewPanel.add(mapView); String mapServerHost = layerDV.getWmsLink().contains("?") ? layerDV.getWmsLink().substring(0, layerDV.getWmsLink().indexOf("?")) : layerDV.getWmsLink(); - DropdownButton downloadButt = new DropdownButton("download as..."); - NavLink navLink = new NavLink("PNG"); + String htmlLinkId = mapView.getPanelMapElementId() + "-image-download"; - final HTML htmlLink = new HTML(""); - navLink.getElement().appendChild(htmlLink.getElement()); - navLink.addClickHandler(new ClickHandler() { - @Override - public void onClick(ClickEvent event) { -// Map mapLayerURLs = mapView.getLightOLSM().getLayerURLsProperty(); -// Collection layerURLs = mapLayerURLs.values(); -// ArrayList layers = new ArrayList(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); + for (IMAGE_EXPORT_AS exportType : IMAGE_EXPORT_AS.values()) { + NavLink navLink = new NavLink(exportType.name()); + String exportExt = exportType.name().toLowerCase(); + String filename = layerDV.getLayerName() + "." + exportExt; + String mimeType = "image/" + exportExt; + final HTML htmlLink = new HTML(""); + navLink.getElement().appendChild(htmlLink.getElement()); + navLink.addClickHandler(new ClickHandler() { -// GWT.log("GWT Map panel id: " + mapView.getPanelMapElementId()); -// Element mapContainer = -// Document.get().getElementById(mapView.getPanelMapElementId()); -// GWT.log("GWT Map panel id: " + mapContainer); - downloadMap(mapView.getLightOLSM().getMap(), mapView.getPanelMapElementId(), htmlLinkId); - // mapExport(mapView.getLightOLSM().getMap(), mapView.getPanelMapElementId()); - } - }); + @Override + public void onClick(ClickEvent event) { + + // DOWNLOAD only the layer by Geoserver + /* + * Map mapLayerURLs = + * mapView.getLightOLSM().getLayerURLsProperty(); Collection layerURLs = + * mapLayerURLs.values(); ArrayList layers = new + * ArrayList(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); + */ + + downloadAttempt++; + + if (downloadAttempt > 3) { + Window.alert("LOOP"); + return; + } + + // DOWNLOAD the OSM + layer by canvas + downloadMap(mapView.getLightOLSM().getMap(), mapView.getPanelMapElementId(), htmlLinkId, + filename, mimeType); + // mapExport(mapView.getLightOLSM().getMap(), mapView.getPanelMapElementId()); + } + }); + + exportMapButton.add(navLink); + + } + + customTable.addNextKeyValue("Abstract", layerDV.getAbstractSection()); + customTable.addNextKeyValue("Valutazione qualità", layerDV.getValutazioneQualita()); + customTable.addNextKeyValue("Metodo raccolta dati", layerDV.getMetodoRaccoltaDati()); + customTable.addNextKeyValue("Scala acquisizione dati", layerDV.getScalaAcquisizione()); + customTable.addNextKeyValues("Autori", layerDV.getAuthors(), GeoportalDataViewerConstants.NEW_LINE_BR); + layerConcessionePanel.add(customTable); - downloadButt.add(navLink); - customTable.addNextKeyWidget("Layer", downloadButt); mapView.addWMSLayer(mapServerHost, layerDV.getLayerName(), layerDV.getBbox()); } } 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.addImage(layerURL, 'PNG', 0, 0, image.width, image.height); doc.save("map.pdf") }-*/; @@ -120,7 +142,8 @@ public class LayerConcessioneView extends Composite { * * @param msg the msg */ - public static native void downloadMap(ol.Map map, String mapPanelId, String linkId)/*-{ + public static native void downloadMap(ol.Map map, String mapPanelId, String linkId, String filename, + String mimeType)/*-{ console.log("map: " + map); map.once('rendercomplete', function() { @@ -129,7 +152,7 @@ public class LayerConcessioneView extends Composite { mapCanvas.width = size[0]; mapCanvas.height = size[1]; var mapContext = mapCanvas.getContext('2d'); - var mapContainer = $doc.querySelector('#'+mapPanelId); + var mapContainer = $doc.querySelector('#' + mapPanelId); //console.log("mapContainer:" +JSON.stringify(mapContainer, null, 4)); Array.prototype.forEach.call(mapContainer .querySelectorAll('.ol-layer canvas'), function(canvas) { @@ -149,10 +172,10 @@ public class LayerConcessioneView extends Composite { }); if (navigator.msSaveBlob) { // link download attribute does not work on MS browsers - navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png'); + navigator.msSaveBlob(mapCanvas.msToBlob(), filename); } else { var link = $doc.getElementById(linkId); - link.href = mapCanvas.toDataURL(); + link.href = mapCanvas.toDataURL(mimeType); link.click(); } });