geoportal-data-viewer-app/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java

package org.gcube.portlets.user.geoportaldataviewer.client.gis;

import java.net.MalformedURLException;

import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;

import ol.Collection;
import ol.Coordinate;
import ol.Map;
import ol.MapBrowserEvent;
import ol.MapOptions;
import ol.OLFactory;
import ol.Overlay;
import ol.OverlayOptions;
import ol.View;
import ol.ViewOptions;
import ol.control.Attribution;
import ol.event.EventListener;
import ol.interaction.Draw;
import ol.interaction.DrawOptions;
import ol.interaction.Extent;
import ol.interaction.ExtentOptions;
import ol.interaction.Interaction;
import ol.interaction.KeyboardPan;
import ol.interaction.KeyboardZoom;
import ol.layer.Image;
import ol.layer.LayerOptions;
import ol.layer.Tile;
import ol.proj.Projection;
import ol.proj.ProjectionOptions;
import ol.source.ImageWms;
import ol.source.ImageWmsOptions;
import ol.source.ImageWmsParams;
import ol.source.Osm;
import ol.source.Vector;
import ol.source.XyzOptions;


// TODO: Auto-generated Javadoc
/**
 * The Class OpenLayerOSM.
 *
 * @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it)
 * 
 * Oct 27, 2020
 */
public class OpenLayerOSM {
	
	/** The map. */
	private Map map;
	
	/** The view. */
	private View view;
	
	/** The view options. */
	private ViewOptions viewOptions = OLFactory.createOptions();
	
	/** The projection options. */
	private ProjectionOptions projectionOptions = OLFactory.createOptions();
	
	/** The point draw. */
	private Draw pointDraw;
	
	/** The popup overlay. */
	private Overlay popupOverlay;

    /**
     * Instantiates a new open layer OSM.
     *
     * @param divTargetId the div target id
     */
    /* (non-Javadoc)
     * @see de.desjardins.ol3.demo.client.example.Example#show()
     */
	public OpenLayerOSM(String divTargetId) {

        // create a OSM-layer
        XyzOptions osmSourceOptions = OLFactory.createOptions();

        Osm osmSource = new Osm(osmSourceOptions);
        LayerOptions osmLayerOptions = OLFactory.createOptions();
        osmLayerOptions.setSource(osmSource);

        Tile osmLayer = new Tile(osmLayerOptions);
		// create a projection
		projectionOptions.setCode(GeoportalDataViewerConstants.EPSG_3857);
		projectionOptions.setUnits("m");

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

        //EPSG_4326_TO_ITALY
        Coordinate centerCoordinate = OLFactory.createCoordinate(12.45, 42.98);
        Coordinate transformedCenterCoordinate = Projection.transform(centerCoordinate, GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857);

        view.setCenter(transformedCenterCoordinate);
        view.setZoom(5);
        
        // create the map
        MapOptions mapOptions = OLFactory.createOptions();
        mapOptions.setTarget(divTargetId);
        mapOptions.setView(view);

        map = new Map(mapOptions);

        map.addLayer(osmLayer);
        //map.addLayer(tileDebugLayer);

        // add some controls
        map.addControl(OLFactory.createScaleLine());
        DemoUtils.addDefaultControls(map.getControls());

        Attribution attribution = new Attribution();
        attribution.setCollapsed(true);
        
        map.addClickListener(new EventListener<MapBrowserEvent>() {
			
			@Override
			public void onEvent(MapBrowserEvent event) {
				// TODO Auto-generated method stub
				Coordinate coordinate = event.getCoordinate();
				if(popupOverlay==null) {
					Element elPopup = DOM.getElementById("popup");
					popupOverlay = addOverlay(elPopup);
					addPopupCloserHandelr(popupOverlay);
				}
				Element popContent = DOM.getElementById("popup-content");
				popContent.setInnerHTML("<p>You clicked here:</p><code>" + coordinate + "</code>");;
				popupOverlay.setPosition(coordinate);
			}
		});

        map.addControl(attribution);

        // add some interactions
        map.addInteraction(new KeyboardPan());
        map.addInteraction(new KeyboardZoom());
        
    }
	
	/**
	 * Adds the popup closer handelr.
	 *
	 * @param popupOverlay the popup overlay
	 */
	private void addPopupCloserHandelr(Overlay popupOverlay) {
		Element elPopupCloser = DOM.getElementById("popup-closer");
		Event.sinkEvents(elPopupCloser, Event.ONCLICK);
		Event.setEventListener(elPopupCloser, new com.google.gwt.user.client.EventListener() {

			@Override
			public void onBrowserEvent(Event event) {
				if (Event.ONCLICK == event.getTypeInt()) {
					popupOverlay.setPosition(null);
				}

			}
		});
	}
	
	/**
	 * Handler popu closer.
	 *
	 * @param divId the div id
	 * @param overlayId the overlay id
	 */
	public static native void handlerPopuCloser(String divId, String overlayId) /*-{
		var closer = $doc.getElementById(divId);
		var overlay = $doc.getElementById(overlayId);
		closer.onclick = function() {
			overlay.setPosition(undefined);
			closer.blur();
			return false;
		};

	}-*/;

	/**
	 * Adds the WMS layer.
	 * @throws MalformedURLException 
	 */
	public void addWMSLayer(String mapServerHost, String layerName) {
		
		ImageWmsParams imageWMSParams = OLFactory.createOptions();
		imageWMSParams.setLayers(layerName);

		ImageWmsOptions imageWMSOptions = OLFactory.createOptions();
		imageWMSOptions.setUrl(mapServerHost);
		imageWMSOptions.setParams(imageWMSParams);
		//imageWMSOptions.setRatio(1.5f);

		ImageWms imageWMSSource = new ImageWms(imageWMSOptions);

		LayerOptions layerOptions = OLFactory.createOptions();
		layerOptions.setSource(imageWMSSource);

		Image wmsLayer = new Image(layerOptions);

		map.addLayer(wmsLayer);
		//https://data.d4science.org/gis-viewer-app/?wmsrequest=https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6&centermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6&centermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6&centermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6&centermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6&centermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6&centermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6&centermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6&centermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6&centermap=12.45%2C42.98https://data.d4science.org/gis-viewer-app/?wmsrequest=https%3A%2F%2Fgeona-proto.d4science.org%2Fgeoserver%2Fconcessioni_conf%2Fwms%3Fservice%3DWMS%26version%3D1.1.0%26request%3DGetMap%26layers%3Dconcessioni_conf%3Acentroids_concessioni%26styles%3D%26bbox%3D8.476%2C39.179%2C17.391%2C45.772%26width%3D768%26height%3D567%26srs%3DEPSG%3A4326%26format%3Dapplication%2Fopenlayers&zoom=6&centermap=

	}
	
	
	/**
	 * Adds the point vector source.
	 *
	 * @return the draw
	 */
	public Draw addPointVectorSource() {
		if(pointDraw==null)
			initPointInteraction();
		
		map.addInteraction(pointDraw);
		return pointDraw;
	}
	
	/**
	 * Inits the point interaction.
	 */
	private void initPointInteraction() {
		Vector vectorSource = new Vector();
		DrawOptions drawOptions = new DrawOptions();
		drawOptions.setSource(vectorSource);
		drawOptions.setType("Point");
		drawOptions.setMaxPoints(1);
		drawOptions.setMinPoints(1);
		drawOptions.setWrapX(false);
		pointDraw = new Draw(drawOptions);
	}
	
	/**
	 * Removes the interaction.
	 *
	 * @param interaction the interaction
	 */
	public void removeInteraction(Interaction interaction) {
		map.removeInteraction(interaction);	
	}
	
	/**
	 * Removes the interactions.
	 */
	public void removeInteractions() {
		Collection<Interaction> interactions = map.getInteractions();
		if(interactions!=null) {
			Interaction[] inters = map.getInteractions().getArray();
			for (int i = 0; i < inters.length; i++) {
				Interaction inter = inters[i];
				map.removeInteraction(inter);
			}
		}
	}
	
	/**
	 * Adds the extent interaction.
	 *
	 * @return the extent
	 */
	public Extent addExtentInteraction() {
		ExtentOptions extentOptions = new ExtentOptions();
		extentOptions.setWrapX(false);
		//StyleOptions styleOptions = new StyleOptions();
		//styleOptions.setStroke(stroke);
		//styleOptions.set
		//extentOptions.setBoxStyle(new ol.style.Style(styleOptions));
		Extent extent = new Extent(extentOptions);
		map.addInteraction(extent);
		return extent;
	}
	
	
	/**
	 * Adds the overlay.
	 *
	 * @param element the element
	 * @return the overlay
	 */
	private Overlay addOverlay(Element element) {
		/**
		 * Create an overlay to anchor the popup to the map.
		 */
		OverlayOptions overlayOptions = new OverlayOptions();
		overlayOptions.setAutoPan(true);
		Overlay overlay = new Overlay(overlayOptions);
		overlay.setElement(element);
		map.addOverlay(overlay);
		return overlay;
	}
	
	
	

}