0

how can I add OSM be the base layer? Below is what I have and the part within asterisk is where I want to place an OSM.

var mapPanel = new GeoExt.MapPanel({
region: "center",
center: [27.795971, -25.609990],
zoom: 11,
layers: [ * * new OpenLayers.Layer.WMS("OpenLayers WMS",
        "http://labs.metacarta.com/wms/vmap0", {
            layers: 'basic'
        }, * * {
            buffer: 0,
            // exclude this layer from layer container nodes
            displayInLayerSwitcher: false
        }),
    new OpenLayers.Layer.WMS("Madibeng City",
        "http://localhost:8080/geoserver/cite/wms", {
            layers: "topp:Madibeng0",
            transparent: true,
            format: "image/gif"
        }, {
            buffer: 0
        }),
    new OpenLayers.Layer.WMS("Madibeng Road Network",
        "http://localhost:8080/geoserver/cite/wms", {
            layers: "Madibeng_LM_RoadNetwork0",
            transparent: true,
            format: "image/gif"
        }, {
            buffer: 0
        }),
    new OpenLayers.Layer.WMS("Madibeng Paved Locations",
        "http://localhost:8080/geoserver/cite/wms", {
            layers: "topp:Verf_Paved0",
            transparent: true,
            format: "image/gif"
        }, {
            buffer: 0
        })
 ]
 });
1

If you want to combine a OpenLayers.Layer.OSM-Baselayer with OpenLayers.Layer.WMS-Overlays in GeoExt you should either use displayOutsideMaxExtent for your WMS-Layers or define a MaxExtent for your map:

// define the MaxExtent for the map

var map = new OpenLayers.Map({
        maxExtent: new OpenLayers.Bounds(1247348.5486233, -4263307.2348958,
                                        4260801.9513187, -2448386.4355452)
                         });

// create OSM Layer

    var osm_layer = new OpenLayers.Layer.OSM();

// create MapPanel with center-point in epsg 3857!

     var mapPanel = new GeoExt.MapPanel({
            title: "Map",
            region: "center",
            height: 400,
            width: 300,
            map: map,
            center: new OpenLayers.LonLat(24.740278910086, -28.844323887404).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()),
            zoom: 5
        });

    // create wms layer

    var wmsLayer = new OpenLayers.Layer.WMS(
            "WMS Layer South Africa",
            "http://gis.lib.virginia.edu:8080/geoserver/South_Africa/wms", {
            layers: 'South_Africa:popoint_point',
            transparent: true
        }, {
            isBaseLayer: false
            //, displayOutsideMaxExtent: true
        });



// add Layers

map.addLayers([osm_layer, wmsLayer]);

Here you will find a working example: http://jsfiddle.net/expedio/hgrnhofc/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.