changeset 797:cc3f481e9484

Introduced GwtOpenLayers to bring up maps. flys-client/trunk@2314 c6561f87-3c4e-4783-a992-168aeb5c3f6f
author Ingo Weinzierl <ingo.weinzierl@intevation.de>
date Fri, 08 Jul 2011 14:56:02 +0000
parents cd8603aaa730
children 7061c2e66039
files flys-client/ChangeLog flys-client/pom.xml flys-client/src/main/java/de/intevation/flys/client/FLYS.gwt.xml flys-client/src/main/java/de/intevation/flys/client/client/FLYS.java flys-client/src/main/java/de/intevation/flys/client/client/ui/map/FloodMap.java flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapOutputTab.java flys-client/src/main/webapp/FLYS.html
diffstat 7 files changed, 174 insertions(+), 19 deletions(-) [+]
line wrap: on
line diff
--- a/flys-client/ChangeLog	Fri Jul 08 08:54:08 2011 +0000
+++ b/flys-client/ChangeLog	Fri Jul 08 14:56:02 2011 +0000
@@ -1,3 +1,26 @@
+2011-07-08  Ingo Weinzierl <ingo@intevation.de>
+
+	* pom.xml: Added a dependency to GwtOpenLayers 0.5 (Apache 2.0).
+
+	* src/main/java/de/intevation/flys/client/FLYS.gwt.xml: Include the GWT
+	  OpenLayers code.
+
+	* src/main/webapp/FLYS.html: Include OpenLayers 2.9 (currently from remote
+	  openlayers.org server). For production use, we have to include a local
+	  OpenLayers.
+
+	* src/main/java/de/intevation/flys/client/client/FLYS.java: Small
+	  modification on the way to render the HTML page. This lets us now
+	  combine GWT and SmartGWT components.
+
+	* src/main/java/de/intevation/flys/client/client/ui/map/FloodMap.java:
+	  New. This components manages the map provided by GwtOpenLayers.
+
+	* src/main/java/de/intevation/flys/client/client/ui/map/MapOutputTab.java:
+	  Initializes a FloodMap now and renders the map in the middle area. Note,
+	  that the layout is nearly completely using GWT components. Mixing
+	  GwtOpenLayers with SmartGWT doesn't work here.
+
 2011-07-08  Ingo Weinzierl <ingo@intevation.de>
 
 	* src/main/java/de/intevation/flys/client/shared/model/OutputMode.java: An
--- a/flys-client/pom.xml	Fri Jul 08 08:54:08 2011 +0000
+++ b/flys-client/pom.xml	Fri Jul 08 14:56:02 2011 +0000
@@ -69,6 +69,11 @@
       <artifactId>commons-lang</artifactId>
       <version>2.6</version>
     </dependency>
+    <dependency>
+      <groupId>org.gwtopenmaps.openlayers</groupId>
+      <artifactId>gwt-openlayers-client</artifactId>
+      <version>0.5</version>
+    </dependency>
   </dependencies>
   
   <build>
--- a/flys-client/src/main/java/de/intevation/flys/client/FLYS.gwt.xml	Fri Jul 08 08:54:08 2011 +0000
+++ b/flys-client/src/main/java/de/intevation/flys/client/FLYS.gwt.xml	Fri Jul 08 14:56:02 2011 +0000
@@ -19,6 +19,9 @@
   <inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlue"/>
   <inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlueResources"/>
 
+  <!-- Inherit the gwtopenlayers stuff -->
+  <inherits name="org.gwtopenmaps.openlayers.OpenLayers"/>
+
   <!-- Other module inherits                                      -->
 
   <!-- Specify the app entry point class.                         -->
--- a/flys-client/src/main/java/de/intevation/flys/client/client/FLYS.java	Fri Jul 08 08:54:08 2011 +0000
+++ b/flys-client/src/main/java/de/intevation/flys/client/client/FLYS.java	Fri Jul 08 14:56:02 2011 +0000
@@ -8,7 +8,6 @@
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.event.shared.UmbrellaException;
 import com.google.gwt.user.client.rpc.AsyncCallback;
-import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.xml.client.XMLParser;
 
 import com.smartgwt.client.util.SC;
@@ -132,7 +131,7 @@
         vertical.addMember(view);
         vertical.addMember(footer);
 
-        RootPanel.get("app").add(vertical);
+        vertical.draw();
 
         initConfiguration();
 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/FloodMap.java	Fri Jul 08 14:56:02 2011 +0000
@@ -0,0 +1,54 @@
+package de.intevation.flys.client.client.ui.map;
+
+import org.gwtopenmaps.openlayers.client.Map;
+import org.gwtopenmaps.openlayers.client.MapOptions;
+import org.gwtopenmaps.openlayers.client.MapWidget;
+import org.gwtopenmaps.openlayers.client.control.Navigation;
+import org.gwtopenmaps.openlayers.client.util.JObjectArray;
+import org.gwtopenmaps.openlayers.client.util.JSObject;
+
+
+public class FloodMap {
+
+    protected MapWidget mapWidget;
+    protected Map       map;
+
+
+    public FloodMap() {
+        MapOptions opts = new MapOptions();
+        opts.setControls(new JObjectArray(new JSObject[] {}));
+        opts.setNumZoomLevels(16);
+        opts.setProjection(getRiverProjection());
+
+        mapWidget = new MapWidget("510px", "635px", opts);
+        map       = mapWidget.getMap();
+
+        initControls();
+    }
+
+
+    protected void initControls() {
+        map.addControl(new Navigation());
+    }
+
+
+    public MapWidget getMapWidget() {
+        return mapWidget;
+    }
+
+
+    public Map getMap() {
+        return map;
+    }
+
+
+    public String getRiverProjection() {
+        return "EPSG:4326";
+    }
+
+
+    public void setSize(String width, String height) {
+        mapWidget.setWidth(width);
+        mapWidget.setHeight(height);
+    }
+}
--- a/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapOutputTab.java	Fri Jul 08 08:54:08 2011 +0000
+++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapOutputTab.java	Fri Jul 08 14:56:02 2011 +0000
@@ -1,21 +1,38 @@
 package de.intevation.flys.client.client.ui.map;
 
+import com.google.gwt.user.client.ui.HorizontalPanel;
+import com.google.gwt.user.client.ui.VerticalPanel;
+import com.google.gwt.user.client.ui.Widget;
+
+import com.smartgwt.client.widgets.Button;
 import com.smartgwt.client.widgets.Canvas;
+import com.smartgwt.client.widgets.events.ClickEvent;
+import com.smartgwt.client.widgets.events.ClickHandler;
 import com.smartgwt.client.widgets.layout.HLayout;
 
+import org.gwtopenmaps.openlayers.client.Bounds;
+import org.gwtopenmaps.openlayers.client.LonLat;
+import org.gwtopenmaps.openlayers.client.layer.WMS;
+import org.gwtopenmaps.openlayers.client.layer.WMSParams;
+
+
 import de.intevation.flys.client.shared.model.Collection;
 import de.intevation.flys.client.shared.model.OutputMode;
 
 import de.intevation.flys.client.client.ui.CollectionView;
 import de.intevation.flys.client.client.ui.OutputTab;
+import de.intevation.flys.client.client.ui.chart.ChartThemePanel;
 
 
 public class MapOutputTab extends OutputTab {
 
     protected CollectionView parent;
 
+    protected Canvas controlPanel;
     protected Canvas themePanel;
-    protected Canvas mapPanel;
+    protected Widget mapPanel;
+
+    protected FloodMap floodMap;
 
 
     public MapOutputTab(
@@ -27,21 +44,79 @@
         super(title, collection, mode);
         this.parent = collectionView;
 
+        floodMap = new FloodMap();
+
         initLayout();
+        initLayers();
     }
 
 
     protected void initLayout() {
-        themePanel = createThemePanel();
-        mapPanel   = createMapPanel();
+        Canvas  wrapper = new Canvas();
+        wrapper.setWidth100();
+        wrapper.setHeight100();
 
+        VerticalPanel vlayout = new VerticalPanel();
+        vlayout.setWidth("100%");
+
+        controlPanel = createControlPanel();
+        themePanel   = createThemePanel();
+        mapPanel     = floodMap.getMapWidget();
+
+        final HorizontalPanel layout = new HorizontalPanel();
+        layout.setWidth("100%");
+        layout.setHeight("635px");
+
+        layout.add(themePanel);
+        layout.add(mapPanel);
+
+        vlayout.add(controlPanel);
+        vlayout.add(layout);
+
+        wrapper.addChild(vlayout);
+
+        setPane(wrapper);
+    }
+
+
+    protected void initLayers() {
+        // TODO Initialize correct layers here
+
+        String url    = "http://vmap0.tiles.osgeo.org/wms/vmap0";
+        String layers = "basic";
+
+        WMSParams params = new WMSParams();
+        params.setLayers(layers);
+        params.setFormat("image/png");
+        params.setIsTransparent(false);
+        params.setMaxExtent(new Bounds(90, 180, -90, -180));
+
+        WMS wms = new WMS("vmap0", url, params);
+        wms.setIsBaseLayer(true);
+        wms.setIsVisible(true);
+
+        floodMap.getMap().addLayer(wms);
+        floodMap.getMap().setCenter(new LonLat(0, 0));
+    }
+
+
+    protected Canvas createControlPanel() {
         HLayout layout = new HLayout();
         layout.setWidth100();
-        layout.setHeight100();
-        layout.addMember(themePanel);
-        layout.addMember(mapPanel);
+        layout.setHeight(30);
+        layout.setMembersMargin(5);
+        layout.setBorder("1px solid black");
 
-        setPane(layout);
+        Button zoomToMax = new Button("Max Extent");
+        zoomToMax.addClickHandler(new ClickHandler() {
+            public void onClick(ClickEvent event) {
+                floodMap.getMap().zoomToMaxExtent();
+            }
+        });
+
+        layout.addMember(zoomToMax);
+
+        return layout;
     }
 
 
@@ -49,17 +124,10 @@
         Canvas c = new Canvas();
         c.setWidth(200);
         c.setHeight100();
-        c.setBorder("1px solid blue");
-
-        return c;
-    }
+        c.setBorder("1px solid black");
 
-
-    protected Canvas createMapPanel() {
-        Canvas c = new Canvas();
-        c.setWidth("*");
-        c.setHeight100();
-        c.setBorder("1px solid green");
+        ChartThemePanel ctp = new ChartThemePanel(collection, mode);
+        c.addChild(ctp);
 
         return c;
     }
--- a/flys-client/src/main/webapp/FLYS.html	Fri Jul 08 08:54:08 2011 +0000
+++ b/flys-client/src/main/webapp/FLYS.html	Fri Jul 08 14:56:02 2011 +0000
@@ -27,6 +27,9 @@
     <!-- be added before this line.                -->
     <!--                                           -->
     <script type="text/javascript" language="javascript" src="flys/flys.nocache.js"></script>
+
+    <!-- TODO We should NOT include OpenLayers from remote. -->
+    <script src="http://openlayers.org/api/2.9/OpenLayers.js"></script>
   </head>
 
     <!--                                           -->

http://dive4elements.wald.intevation.org