[Users] Users Digest, Vol 25, Issue 20

Tue Feb 15 16:52:35 CET 2011

Hi Lucia,

Thanks for showing the code of a working example.
I tried it out on available WMS and it worked!.
I still have to find out, why mine did not work :)

I will put the working example here in case others need it

<html>
<head>

<title> A WMS + OSM GeoExt Map, Mercator projection </title>
<script src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"  type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"></link>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="http://api.geoext.org/1.0/script/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://api.geoext.org/1.0/resources/css/geoext-all-debug.css"></link>

<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<script type="text/javascript">
    Ext.onReady(function() {

        layers = [];   
        var proj4326 = new OpenLayers.Projection("EPSG:4326");
        var projmerc = new OpenLayers.Projection("EPSG:900913");
        map = new OpenLayers.Map({
                projection: projmerc,
                displayProjection: proj4326,
                units: "m",
                numZoomLevels: 19,
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
                allOverlays: true
              });
        var lonlatEurope = new OpenLayers.LonLat(12.0849609375, 47.79839667295524);
        var kansas = new OpenLayers.LonLat(-99, 39);        
        lonlatEurope.transform(proj4326, projmerc);
        kansas.transform(proj4326, projmerc);

        var osm = new OpenLayers.Layer.OSM.Mapnik("OSM Mapnik", {
                        transparent: true},{
                        visibility: true
                        });
        layers.push(osm);
//Layer is in WGS 84 projection

        var usapop = new OpenLayers.Layer.WMS(
            "USA pop",
            "http://demo.opengeo.org/geoserver/wms",
            {layers: "topp:states"},
            {opacity: 0.5}
        );
        layers.push(usapop)    

        map.addLayers(layers);

        new GeoExt.MapPanel({
            renderTo: 'gxmap',
            height: 400,
            width: 600,
            center: kansas,            
            map: map,
            zoom: 4,
            title: 'A WMS + OSM GeoExt Map, Mercator projection'
        });
    });
</script>
</head>
<body>
<div id="gxmap"></div>
</body>
</html>

Hi Erwin,

my source code looks like this:

                var proj4326 = new OpenLayers.Projection("EPSG:4326");

                var projmerc = new OpenLayers.Projection("EPSG:900913");

map = new OpenLayers.Map({

        projection: projmerc,

        displayProjection: proj4326,

        units: "m",

        numZoomLevels: 19,

        maxResolution: 156543.0339,

        maxExtent: new OpenLayers.Bounds(-20037508, -20037508,

                                         20037508, 20037508.34),

         controls: []

});

                var lonlatEurope = new OpenLayers.LonLat(12.0849609375, 47.79839667295524);

                lonlatEurope.transform(proj4326, projmerc);

                var osm = new OpenLayers.Layer.OSM.Mapnik("OSM Mapnik", {

                                               transparent: true

                               },{

                                               visibility: true

                               }

                )

                layers.push(osm);

                //Layer is in WGS 84 projection

layers.push(new OpenLayers.Layer.WMS("ThermoMap Countries", geoserverURL, {

            layers: "ThermoMap:ThermoMap_Partners_Countries",

            transparent: true,

            format: 'image/png'

        }, {

            singleTile: true,

            isBaseLayer: false,

            visibility: false

        }

));

                map.addLayers(layers);

                map.setCenter(lonlatEurope, 4, true, true);