[Commits] r942 - core/trunk/geoext/examples

Tue Jun 2 10:27:59 CEST 2009

Author: elemoine
Date: 2009-06-02 10:27:59 +0200 (Tue, 02 Jun 2009)
New Revision: 942

Added:
   core/trunk/geoext/examples/mappanel-viewport.html
   core/trunk/geoext/examples/mappanel-viewport.js
Log:
"GeoExt MapPanel in an Ext Viewport" example, the example does not work currently when google is set to true in the code, it will work with OpenLayers-rc5 though. No functional change.


Added: core/trunk/geoext/examples/mappanel-viewport.html
===================================================================

--- core/trunk/geoext/examples/mappanel-viewport.html	                        (rev 0)
+++ core/trunk/geoext/examples/mappanel-viewport.html	2009-06-02 08:27:59 UTC (rev 942)
@@ -0,0 +1,40 @@
+<html>
+    <head>
+        <title>GeoExt MapPanel in an Ext Viewport</title>
+
+        <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
+        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+        <link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/examples/shared/examples.css"></link>
+
+        <!-- Google Maps API for "localhost" -->
+        <!--
+        <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
+        -->
+        <!-- Google Maps API for "dev.geoext.org" -->
+        <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA_5ak-hsiH4j5bQQn7-k66xTWxvN8zH6Ta_pgIhhU0TB7bG8iAhS99ituPif4lG-2CHXoZ3qenLnK1g'></script>
+
+        <script src="http://openlayers.org/api/2.8-rc4/OpenLayers.js"></script>
+        <!--
+        <script type="text/javascript" src="../../openlayers/lib/OpenLayers.js"></script>
+        -->
+
+        <script type="text/javascript" src="../lib/GeoExt.js"></script>
+        
+        <script type="text/javascript" src="mappanel-viewport.js"></script>
+
+    </head>
+    <body>
+        <div id="title">
+            <h1>GeoExt.MapPanel in an Ext.Viewport</h1>
+        </div>
+
+        <div id="description">
+            <p>This example shows how to place a MapPanel as a region in a
+            container using a border layout, the container is a Viewport in
+            this example.</p>
+            
+            <p>The js is not minified so it is readable. See <a
+            href="mappanel-viewport.js">mappanel-viewport.js</a>.</p>
+        </div>
+    </body>
+</html>

Added: core/trunk/geoext/examples/mappanel-viewport.js
===================================================================
--- core/trunk/geoext/examples/mappanel-viewport.js	                        (rev 0)
+++ core/trunk/geoext/examples/mappanel-viewport.js	2009-06-02 08:27:59 UTC (rev 942)
@@ -0,0 +1,68 @@
+var mapPanel;
+
+Ext.onReady(function() {
+
+    // if true a google layer is used, if false
+    // the bluemarble WMS layer is used
+    var google = false;
+
+    var options, layer;
+    var extent = new OpenLayers.Bounds(-5, 35, 15, 55);
+
+    if (google) {
+
+        options = {
+            projection: new OpenLayers.Projection("EPSG:900913"),
+            units: "m",
+            numZoomLevels: 18,
+            maxResolution: 156543.0339,
+            maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
+                                             20037508, 20037508.34)
+        };
+
+        layer = new OpenLayers.Layer.Google(
+            "Google Satellite",
+            {type: G_SATELLITE_MAP, sphericalMercator: true}
+        );
+
+        extent.transform(
+            new OpenLayers.Projection("EPSG:4326"), options.projection
+        );
+
+    } else {
+        layer = new OpenLayers.Layer.WMS(
+            "bluemarble",
+            "http://sigma.openplans.org/geoserver/wms?",
+            {layers: 'bluemarble'},
+            {isBaseLayer: true}
+        );
+    }
+
+    var map = new OpenLayers.Map(options);
+
+    new Ext.Viewport({
+        layout: "border",
+        items: [{
+            region: "north",
+            contentEl: "title",
+            height: 50
+        }, {
+            region: "center",
+            id: "mappanel",
+            title: "Map",
+            xtype: "gx_mappanel",
+            map: map,
+            layers: [layer],
+            extent: extent,
+            split: true
+        }, {
+            region: "east",
+            title: "Description",
+            contentEl: "description",
+            width: 200,
+            split: true
+        }]
+    });
+
+    mapPanel = Ext.getCmp("mappanel");
+});

