From ab8119be2e717d0a0a0de47895a1c33cc006e046 Mon Sep 17 00:00:00 2001 From: "francesco.mangiacrapa" Date: Tue, 10 Nov 2020 16:22:28 +0100 Subject: [PATCH] in progress view details --- .classpath | 1 + .../client/gis/LightOpenLayerOSM.java | 233 ++++++++++++++++++ .../client/resources/Images.java | 3 + .../client/resources/map-marker-icon.png | Bin 0 -> 1341 bytes .../client/ui/map/MapView.java | 56 +++++ .../client/ui/map/MapView.ui.xml | 9 + .../client/ui/products/ConcessioneView.java | 14 ++ .../client/ui/products/ConcessioneView.ui.xml | 36 +-- .../client/ui/products/RecordView.ui.xml | 3 - 9 files changed, 336 insertions(+), 19 deletions(-) create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/LightOpenLayerOSM.java create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/map-marker-icon.png create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.java create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.ui.xml diff --git a/.classpath b/.classpath index 348ca0d..c5c4bd3 100644 --- a/.classpath +++ b/.classpath @@ -32,6 +32,7 @@ + diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/LightOpenLayerOSM.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/LightOpenLayerOSM.java new file mode 100644 index 0000000..c6cb3f0 --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/LightOpenLayerOSM.java @@ -0,0 +1,233 @@ +package org.gcube.portlets.user.geoportaldataviewer.client.gis; + +import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants; +import org.gcube.portlets.user.geoportaldataviewer.client.resources.Images; +import org.gcube.portlets.user.geoportaldataviewer.shared.gis.GeoQuery; +import org.gcube.portlets.user.geoportaldataviewer.shared.gis.GeoQuery.TYPE; + +import ol.Coordinate; +import ol.Feature; +import ol.Map; +import ol.MapBrowserEvent; +import ol.MapOptions; +import ol.OLFactory; +import ol.View; +import ol.ViewOptions; +import ol.control.Attribution; +import ol.event.EventListener; +import ol.geom.Point; +import ol.interaction.KeyboardPan; +import ol.interaction.KeyboardZoom; +import ol.layer.LayerOptions; +import ol.layer.Tile; +import ol.layer.VectorLayerOptions; +import ol.proj.Projection; +import ol.proj.ProjectionOptions; +import ol.source.Osm; +import ol.source.XyzOptions; +import ol.style.FillOptions; +import ol.style.Icon; +import ol.style.IconOptions; +import ol.style.Image; +import ol.style.Style; + + public class LightOpenLayerOSM { + + /** 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(); + + + private boolean isQueryPointActive; + + private ol.layer.Vector geometryLayer; + + private String markerURL = Images.ICONS.mapMarkerIcon().getURL(); + + + /** + * Instantiates a new open layer OSM. + * + * @param divTargetId the div target id + * @param eventBus the event bus + */ + /* (non-Javadoc) + * @see de.desjardins.ol3.demo.client.example.Example#show() + */ + public LightOpenLayerOSM(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() { + + @Override + public void onEvent(MapBrowserEvent event) { + // TODO Auto-generated method stub + Coordinate coordinate = event.getCoordinate(); + if(isQueryPointActive) { + + double lon = coordinate.getX(); + double lat = coordinate.getY(); + + int w = (int) map.getSize().getWidth(); + int h = (int) map.getSize().getHeight(); + // handler.clickOnMap(x, y, w, h); + + // ratio - mapPixelWeight : bboxWeight = 10px : geoRectangleWidth + // where 10px is the pixel diameter dimension of the clicked point + double bboxWidth = Math.abs(getExtent().getLowerLeftX() - getExtent().getUpperRightX()); + double geoWidth = (bboxWidth / w) * (20 / 2); + double x1 = Math.min(lon+geoWidth, lon-geoWidth); + double x2 = Math.max(lon+geoWidth, lon-geoWidth); + double y1 = Math.min(lat+geoWidth, lat-geoWidth); + double y2 = Math.max(lat+geoWidth, lat-geoWidth); + //GWT.log("("+x1+","+y1+")("+x2+","+y2+")"); + +// Point pt = new Point(coordinate); +// ol.Extent extent = pt.getExtent(); +// //new ClickDataInfo(x1, y1, x2, y2) +// SelectDataInfo selectDataInfo + //selectBox(new GeoQuery(x1, y1, x2, y2, GeoQuery.TYPE.POINT)); + GeoQuery select = new GeoQuery(x1, y1, x2, y2, TYPE.POINT); + + } + } + }); + + map.addControl(attribution); + + // add some interactions + map.addInteraction(new KeyboardPan()); + map.addInteraction(new KeyboardZoom()); + + } + + public void addPoint(Coordinate coordinate) { + + if(geometryLayer!=null) { + map.removeLayer(geometryLayer); + }else { + + } + Style style = new Style(); + IconOptions iconOptions = new IconOptions(); + iconOptions.setSrc(markerURL); + Icon icon = new Icon(iconOptions); + style.setImage(icon); + FillOptions fillOptions = new FillOptions(); + //fillOptions.setColor(new Color(red, green, blue, alpha)); + //style.setFill(new Fill(fillOptions)); +// style.setFillColor("#00FF00"); +// style.setGraphicName("circle"); +// style.setPointRadius(10); + Point thePoint = new Point(coordinate); + Feature vf = new Feature(thePoint); + vf.setStyle(style); + ol.source.Vector vector = new ol.source.Vector(); + vector.addFeature(vf); + VectorLayerOptions vectorLayerOptions = new VectorLayerOptions(); + vectorLayerOptions.setSource(vector); + geometryLayer = new ol.layer.Vector(vectorLayerOptions); + map.addLayer(geometryLayer); + } + + public Map getMap() { + return map; + } + + /** + * Gets the projection code. + * + * @return the projection code + */ + public String getProjectionCode() { + return map.getView().getProjection().getCode(); + } + + + /** + * Gets the current zoom level. + * + * @return the current zoom level + */ + public double getCurrentZoomLevel() { + return map.getView().getZoom(); + } + + + + /** + * Gets the bbox. + * + * @return the bbox + */ + public ol.Extent getBBOX() { + return getExtent(); + } + + /** + * Gets the extent. + * + * @return the extent + */ + public ol.Extent getExtent() { + return this.map.getView().calculateExtent(map.getSize()); + } + + public Coordinate transform (Coordinate centerCoordinate, String source, String target){ + return Projection.transform(centerCoordinate, source, target); + } + + +} + diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/Images.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/Images.java index f7f80fb..a91cac2 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/Images.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/Images.java @@ -10,4 +10,7 @@ public interface Images extends ClientBundle { @Source("loading.gif") ImageResource loading(); + + @Source("map-marker-icon.png") + ImageResource mapMarkerIcon(); } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/map-marker-icon.png b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/resources/map-marker-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..86eb5a653da7492b09fc50336065f0b17eb2e367 GIT binary patch literal 1341 zcmV-D1;YA?P)dI zz51#}sytj(KrTN4BsP7UOf{DCu`ow~ z*wVnL;9+Bf%N>9Fu`uZP6o z^%G^qE`Zpe1S!VN1($pJ{pU=Ry{9vXa=--_vlZeTY~k?q@c9ck)q_CQjYq7<-hakg zz?krJv-D^wfE9vrg%mFjT<+uVKPxqMo`@jI0VkbI=F4$$B*6GDzIx&CkxpAi={8mwWl+*8+n*rxJ;Bz(y;*Ix``@Mi~DCF!*17 z1*bQLN8f*z#a+15jZNQNJ>^nmZjLSxTO1ht0>Eg1fr}qL*Lxhf*hG{A8nqN%(v+lk z!}y@W=kEKDuq^oP`1{XZl{X$8MAp-!CTnje%(o55iC@p&U+_n7j-91D( zz*3l>b)BW|V~|H+V(-5HV0iuQJB<71+uy${&VKm17vv~oer{)ONa_b?eo-z?1|d!k zWFucjoxCEu|MiF8L^%Ki_SqR$Yw~fo!1$oD0OSBzZomaVsUPG3Y+7YBvLFJQVru8i1#@r~?j7&!3ieQ4yVt7~xCL9jjW(97xo&~SS~ z>ac-7|NbA8-FDOgpBjP=sMS<3$WoR$17tFjX#d}N_n(y` zq}cxc*YDX{yH2JNQb&{nqUFTJdh}FpF%WJK!obJsD|glAJ$U|#Dh>dF-L?iLI{ZA{ z#HhXX`CF;|!E-&ts3qC~mO^}NYb|xJ08_du0j0MiPhQbE@cP3qsyYA!W*ckx`ACXv z#2ZpC-}%R#zP5>2Gf8p)2;BFy+6`=ixnPq6c24%lZ9C>lig_eEph8_Zo) z1Ht>UOLtTkKYH<&E)D>J?Kb-P1_Hd`M&`9oUkjWMou5dKIb=J)1lVESWTgjgW`~}* zqIdM|M}i$usyYA!rWvYxvNJI { + } + + @UiField + HTMLPanel theMap; + + private LightOpenLayerOSM olsm; + + public MapView(Double x, Double y) { + initWidget(uiBinder.createAndBindUi(this)); + String theMapId = "map"+Random.nextInt(); + theMap.getElement().setId(theMapId); + theMap.setSize("300px", "300px"); + + Scheduler.get().scheduleDeferred(new ScheduledCommand() { + + @Override + public void execute() { + olsm = new LightOpenLayerOSM(theMapId); + if(x!=null && y!=null) { + Coordinate point = new Coordinate(x, y); + addPoint(point); + } + + } + }); + + } + + private void addPoint(Coordinate coordinate){ + olsm.addPoint(coordinate); + olsm.getMap().getView().setCenter(coordinate); + + } +} diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.ui.xml new file mode 100644 index 0000000..c9caf4d --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.ui.xml @@ -0,0 +1,9 @@ + + + + + + + + \ No newline at end of file diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/ConcessioneView.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/ConcessioneView.java index 599ce09..c86c8f8 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/ConcessioneView.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/ConcessioneView.java @@ -3,6 +3,7 @@ package org.gcube.portlets.user.geoportaldataviewer.client.ui.products; import java.util.List; import org.gcube.portlets.user.geoportaldataviewer.client.ui.images.ImageView; +import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.MapView; import org.gcube.portlets.user.geoportaldataviewer.shared.products.ConcessioneDV; import org.gcube.portlets.user.geoportaldataviewer.shared.products.model.UploadedImageDV; @@ -21,6 +22,8 @@ import com.google.gwt.user.client.ui.FlowPanel; import com.google.gwt.user.client.ui.HTMLPanel; import com.google.gwt.user.client.ui.Widget; +import ol.Coordinate; + public class ConcessioneView extends Composite { @@ -50,6 +53,9 @@ public class ConcessioneView extends Composite { @UiField HTMLPanel pageViewDetails; + @UiField + HTMLPanel mapViewPanel; + private ConcessioneDV concessioneDV; private Thumbnails thumbNails = new Thumbnails(); @@ -75,8 +81,16 @@ public class ConcessioneView extends Composite { addLabel(contributore, concessioneDV.getContributore()); addImages(); + + addMap(); } + private void addMap() { + MapView mapView = new MapView(concessioneDV.getCentroidLong(), concessioneDV.getCentroidLat()); + mapViewPanel.add(mapView); + } + + private void addImages() { List immagini = concessioneDV.getImmaginiRappresentative(); if(immagini!=null && immagini.size()>0) { diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/ConcessioneView.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/ConcessioneView.ui.xml index 9f311a4..6fa2845 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/ConcessioneView.ui.xml +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/ConcessioneView.ui.xml @@ -21,23 +21,27 @@ - - + + - - - Autori - - - - - - Contributore - - - - + + + + + + Autori + + + + + + Contributore + + + + + Relazione Scavo diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/RecordView.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/RecordView.ui.xml index 406a0a6..52707c0 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/RecordView.ui.xml +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/RecordView.ui.xml @@ -3,9 +3,6 @@ xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"> - .margin-left-10 { - margin-left: 10px; - }