Ticket #60: mappanel-with-google.diff

File mappanel-with-google.diff, 3.6 kB (added by elemoine, 1 year ago)

  • examples/mappanel-viewport.js

    old new  
     1var mapPanel; 
     2 
     3Ext.onReady(function() { 
     4 
     5    // if true a google layer is used, if false 
     6    // the bluemarble WMS layer is used 
     7    var google = false; 
     8 
     9    var options, layer; 
     10    var extent = new OpenLayers.Bounds(-5, 35, 15, 55); 
     11 
     12    if (google) { 
     13 
     14        options = { 
     15            projection: new OpenLayers.Projection("EPSG:900913"), 
     16            units: "m", 
     17            numZoomLevels: 18, 
     18            maxResolution: 156543.0339, 
     19            maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 
     20                                             20037508, 20037508.34) 
     21        }; 
     22 
     23        layer = new OpenLayers.Layer.Google( 
     24            "Google Satellite", 
     25            {type: G_SATELLITE_MAP, sphericalMercator: true} 
     26        ); 
     27 
     28        extent.transform( 
     29            new OpenLayers.Projection("EPSG:4326"), options.projection 
     30        ); 
     31 
     32    } else { 
     33        layer = new OpenLayers.Layer.WMS( 
     34            "bluemarble", 
     35            "http://sigma.openplans.org/geoserver/wms?", 
     36            {layers: 'bluemarble'}, 
     37            {isBaseLayer: true} 
     38        ); 
     39    } 
     40 
     41    var map = new OpenLayers.Map(options); 
     42 
     43    new Ext.Viewport({ 
     44        layout: "border", 
     45        items: [{ 
     46            region: "north", 
     47            contentEl: "title", 
     48            height: 50 
     49        }, { 
     50            region: "center", 
     51            id: "mappanel", 
     52            title: "Map", 
     53            xtype: "gx_mappanel", 
     54            layers: [layer], 
     55            extent: extent, 
     56            split: true 
     57        }, { 
     58            region: "east", 
     59            title: "Description", 
     60            contentEl: "description", 
     61            width: 200, 
     62            split: true 
     63        }] 
     64    }); 
     65 
     66    mapPanel = Ext.getCmp("mappanel"); 
     67}); 

  • examples/mappanel-viewport.html

    old new  
     1<html> 
     2    <head> 
     3        <title>GeoExt MapPanel in an Ext Viewport</title> 
     4 
     5        <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script> 
     6        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" /> 
     7        <link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/examples/shared/examples.css"></link> 
     8        <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> 
     9        <!-- 
     10        <script src="http://openlayers.org/api/2.8-rc4/OpenLayers.js"></script> 
     11        --> 
     12        <script type="text/javascript" src="../../openlayers/lib/OpenLayers.js"></script> 
     13        <script type="text/javascript" src="../lib/GeoExt.js"></script> 
     14         
     15        <script type="text/javascript" src="mappanel-viewport.js"></script> 
     16 
     17    </head> 
     18    <body> 
     19        <div id="title"> 
     20            <h1>GeoExt.MapPanel in an Ext.Viewport</h1> 
     21        </div> 
     22 
     23        <div id="description"> 
     24            <p>This example shows how to place a MapPanel as a region in a 
     25            container using a border layout, the container is a Viewport in 
     26            this example.</p> 
     27             
     28            <p>The js is not minified so it is readable. See <a 
     29            href="mappanel-viewport.js">mappanel-viewport.js</a>.</p> 
     30        </div> 
     31    </body> 
     32</html>