gCubeSystem
/
geoportal-data-viewer-app
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improved the interactions on Map and the view with details

This commit is contained in:
Francesco Mangiacrapa 2020-11-24 11:26:05 +01:00
parent ca5a5dbb00
commit 609f38678e
14 changed files with 97 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewerConstants.java
View File

@ -28,7 +28,9 @@ public class GeoportalDataViewerConstants {
public static final double ITALY_CENTER_LAT = 42.98;
public static final int ITALY_FIT_ZOOM_ON = 5;
public static final int LIGHT_MAP_ITALY_FIT_ZOOM_ON = 5;
public static final int MAP_ITALY_FIT_ZOOM_ON = 6;
}

3
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/LayerManager.java
View File

@ -317,7 +317,7 @@ public class LayerManager {
@Override
public void onLayerRendered(AddedLayerToMapEvent addedLayerToMapEvent) {
GWT.log("Fired into layerManagerBus");
GWT.log("Fired into layerManagerBus "+addedLayerToMapEvent);
applicationBus.fireEvent(addedLayerToMapEvent);
}
});
@ -327,6 +327,7 @@ public class LayerManager {
@Override
public void onZoomOut(ZoomOutOverMinimumEvent zoomOutEvent) {
GWT.log("Fired into layerManagerBus "+zoomOutEvent);
applicationBus.fireEvent(zoomOutEvent);
}
});

2
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/OLMapManager.java
View File

@ -126,7 +126,7 @@ public class OLMapManager {
GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857);
olMap.setCenter(transformedCenterCoordinate);
olMap.setZoom(GeoportalDataViewerConstants.ITALY_FIT_ZOOM_ON);
olMap.setZoom(GeoportalDataViewerConstants.MAP_ITALY_FIT_ZOOM_ON);
}

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

@ -120,7 +120,7 @@ public abstract class OpenLayerOSM {
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);

14
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/GeonaDataViewMainPanel.ui.xml
View File

@ -7,12 +7,24 @@
.margin-right-10 {
margin-right: 10px;
}
.font-weight-bold {
font-weight: bold;
}
</ui:style>
<g:HTMLPanel ui:field="mainHTMLPanel">
<g:HTMLPanel ui:field="mainContainerPanel">
<g:HTMLPanel ui:field="mainToolBar"
addStyleNames="inner-toolbar">
<b:DropdownButton type="LINK" text="Query" visible="false">
<b:DropdownButton type="LINK" text=" " icon="INFO">
<g:HTMLPanel ui:field="panelMI"
addStyleNames="info-interaction">
<g:Label>Map Interaction</g:Label>
<b:Paragraph><b:Icon type="CHECK_EMPTY"/> Use <code>Shift+Drag</code> to draw an extent for zoom in the Map</b:Paragraph>
<b:Paragraph><b:Icon type="HAND_UP"/> Click on the Points shown on the Map to view their features</b:Paragraph>
</g:HTMLPanel>
</b:DropdownButton>
<b:DropdownButton type="LINK" text="Query"
visible="false">
<!-- <b:ButtonGroup toggle="checkbox" ui:field="buttonGroup"> -->
<b:NavLink ui:field="dataPointSelection"
addStyleNames="{style.margin-right-10}">Data Point

1
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/ModalWindow.java
View File

@ -34,6 +34,7 @@ public class ModalWindow {
modal.setTitle(title);
modal.setCloseVisible(true);
modal.setWidth(900);
modal.setMaxHeigth(600+"px");
ModalFooter modalFooter = new ModalFooter();
final Button buttClose = new Button("Close");

2
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/images/ImageView.java
View File

@ -96,7 +96,7 @@ public class ImageView extends Composite {
ModalWindow mw = new ModalWindow(StringUtil.ellipsize(imageDV.getTitolo(), 20));
mw.add(new ImageView(imageDV, false, true));
mw.setCaller(ImageView.this);
mw.setWidth(900);
//mw.setWidth(900);
mw.show();
}

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

@ -51,8 +51,11 @@ import ol.OLFactory;
/**
* Instantiates a new map view.
*
* @param centerTo the center to
* @param zoom the zoom
*/
public MapView() {
public MapView(Coordinate centerTo, int zoom) {
initWidget(uiBinder.createAndBindUi(this));
String theMapId = "map"+Random.nextInt();
theMap.getElement().setId(theMapId);
@ -67,7 +70,28 @@ import ol.OLFactory;
Coordinate transformedCenterCoordinate = MapUtils.transformCoordiante(centerCoordinate, GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857);
olsm.setCenter(transformedCenterCoordinate);
olsm.setZoom(GeoportalDataViewerConstants.ITALY_FIT_ZOOM_ON);
olsm.setZoom(GeoportalDataViewerConstants.LIGHT_MAP_ITALY_FIT_ZOOM_ON);
//setMapSize();
}
});
}
private void setMapSize() {
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
@Override
public void execute() {
int width = theMap.getParent().getOffsetWidth();
int height = theMap.getParent().getOffsetHeight();
if(width==0)
width = 300;
if(height==0)
height = 300;
GWT.log("Internal Map w: "+width + ", h: "+height);
theMap.setSize(width+"px", height+"px");
}
});
}

6
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/map/MapView.ui.xml
View File

@ -5,9 +5,13 @@
.internalMap {
width: 300px;
height: 300px;
float: right;
}
.map-style {
width: 100%;
}
</ui:style>
<g:HTMLPanel>
<g:HTMLPanel addStyleNames="{style.map-style}">
<g:HTMLPanel ui:field="theMap"
addStyleNames="{style.internalMap}">
</g:HTMLPanel>

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

@ -33,6 +33,7 @@ import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Widget;
import ol.Coordinate;
import ol.OLFactory;
public class ConcessioneView extends Composite {
@ -203,7 +204,7 @@ public class ConcessioneView extends Composite {
ModalWindow mw = new ModalWindow(concessioneDV.getNome());
mw.add(cv);
mw.setCaller(ConcessioneView.this);
mw.setWidth(900);
//mw.setWidth(900);
mw.show();
}
@ -296,7 +297,9 @@ public class ConcessioneView extends Composite {
}
private void addCentroidMap() {
MapView mapView = new MapView();
Coordinate centerCoordinate = OLFactory.createCoordinate(GeoportalDataViewerConstants.ITALY_CENTER_LONG, GeoportalDataViewerConstants.ITALY_CENTER_LAT);
Coordinate transformedCenterCoordinate = MapUtils.transformCoordiante(centerCoordinate, GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857);
MapView mapView = new MapView(transformedCenterCoordinate, GeoportalDataViewerConstants.LIGHT_MAP_ITALY_FIT_ZOOM_ON);
Coordinate coord = new Coordinate(concessioneDV.getCentroidLong(), concessioneDV.getCentroidLat());
Coordinate transfCoord = MapUtils.transformCoordiante(coord, GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857);
//Coordinate invertedCoordinate = MapUtils.reverseCoordinate(coord);

7
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.ui.xml
View File

@ -20,6 +20,11 @@
.margin-bottom-10 {
margin-bottom: 10px;
}
.width-100 {
width: 100%;
}
</ui:style>
<g:HTMLPanel ui:field="pageViewDetails">
<!-- <g:HTMLPanel ui:field="sharePanel" -->
@ -32,7 +37,7 @@
<b:Button ui:field="viewButton">View</b:Button>
</g:HorizontalPanel>
<b:Paragraph ui:field="introduzione"></b:Paragraph>
<g:HorizontalPanel>
<g:HorizontalPanel addStyleNames="{style.width-100}">
<g:HTMLPanel ui:field="concessioniPanel">
</g:HTMLPanel>
<g:HTMLPanel ui:field="mapViewPanel">

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

@ -1,6 +1,7 @@
package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni;
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants;
import org.gcube.portlets.user.geoportaldataviewer.client.gis.MapUtils;
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.model.LayerConcessioneDV;
@ -12,6 +13,9 @@ import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Widget;
import ol.Coordinate;
import ol.OLFactory;
public class LayerConcessioneView extends Composite {
private static LayerConcessioneUiBinder uiBinder = GWT.create(LayerConcessioneUiBinder.class);
@ -39,7 +43,10 @@ public class LayerConcessioneView extends Composite {
layerConcessionePanel.add(customTable);
if(layerDV.getLayerName()!=null && layerDV.getWmsLink()!=null) {
MapView mapView = new MapView();
Coordinate centerCoordinate = OLFactory.createCoordinate(GeoportalDataViewerConstants.ITALY_CENTER_LONG, GeoportalDataViewerConstants.ITALY_CENTER_LAT);
Coordinate transformedCenterCoordinate = MapUtils.transformCoordiante(centerCoordinate, GeoportalDataViewerConstants.EPSG_4326, GeoportalDataViewerConstants.EPSG_3857);
MapView mapView = new MapView(transformedCenterCoordinate, GeoportalDataViewerConstants.LIGHT_MAP_ITALY_FIT_ZOOM_ON);
mapViewPanel.add(mapView);
String mapServerHost = layerDV.getWmsLink().contains("?")? layerDV.getWmsLink().substring(0,layerDV.getWmsLink().indexOf("?")):layerDV.getWmsLink();
mapView.addWMSLayer(mapServerHost, layerDV.getLayerName(), layerDV.getBbox());

11
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/LayerConcessioneView.ui.xml
View File

@ -8,17 +8,8 @@
font-weight: bold;
}
.style-layer {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.055);
margin-right: 10px;
margin-bottom: 10px;
width: 673px;
}
</ui:style>
<g:HTMLPanel addStyleNames="{style.style-layer}">
<g:HTMLPanel addStyleNames="style-layer">
<g:HorizontalPanel>
<g:HTMLPanel ui:field="layerConcessionePanel"></g:HTMLPanel>
<g:HTMLPanel ui:field="mapViewPanel">

24
src/main/webapp/GeoportalDataViewer.css
View File

@ -201,4 +201,28 @@ body {
.inner-toolbar .btn-link:hover, .inner-toolbar .btn-link:focus {
background-color: #f3f3f3 !important;
text-decoration: none;
}
.style-layer {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
margin-right: 10px;
margin-bottom: 10px;
width: 100%;
}
.style-layer table {
width: 100%;
}
.info-interaction {
padding: 10px;
margin-right: 10px;
}
.info-interaction .gwt-Label {
font-weight: bold;
padding-bottom: 5px;
}