0

I'm using the following code to get my WMS layers through GeoExt's WMSCapabilities store and display them in a grid for the users to select and add them to the map panel. but i need to add also a base layer but i couldn't succeed.

 Ext.onReady(function() {
        app = new Ext.Viewport({
            layout: "border",
            items: items
        });
    });
    var map = new OpenLayers.Map(null, {
          projection: new OpenLayers.Projection("EPSG:3857"),
          allOverlays: true,
          maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                 20037508.34, 20037508.34),
          units: 'm',
          numZoomLevels: 10
      });
    items.push({
        xtype: "gx_mappanel",
        ref: "mapPanel",
        region: "center",
        map: map
    });
    controls.push(
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.PanPanel(),
        new OpenLayers.Control.ZoomPanel()
    );
    items.push({
        xtype: "grid",
        ref: "capsGrid", // makes the grid available as app.capsGrid
        title: "Request/Status Map Layers",
        region: "north",
        height: 150,
        viewConfig: {forceFit: true},
        store: new GeoExt.data.WMSCapabilitiesStore({
            url: "data/getcap_1.3.0.xml",
            autoLoad: true
        }),
        columns: [
            {header: "Name", dataIndex: "name", sortable: true},
            {header: "Title", dataIndex: "title", sortable: true},
            {header: "Abstract", dataIndex: "abstract"}
        ],
        bbar: [{
            text: "Add to Map",
            handler: function() {
                app.capsGrid.getSelectionModel().each(function(record) {
                    var clone = record.clone();
                    bbox = clone.get("llbbox");
                    clone.getLayer().mergeNewParams({
                        format: "image/png",
                        transparent: true
                    });
                    var osmLayer = new OpenLayers.Layer.OSM();
                    //app.mapPanel.layers.add(osmLayer);
                    app.mapPanel.layers.add(clone);
                    app.mapPanel.map.zoomToExtent(
                        OpenLayers.Bounds.fromArray(clone.get("llbbox")).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857"))
                    );
                });
            }
        }]
    });

    </script>
</head>
<body>
</body>

1

You will have to request your layer in the correct srs and transform the bbox you grabbed from the clone variable

  • Thank you, but that is what i have already did. – user30839 Jan 22 '15 at 17:51
  • Can you explain what exactly does not work? – Thomas B Jan 22 '15 at 17:52
  • 1
    So this means your problem is solved? Or did you want to add the osm-layer dynamically? – Thomas B Jan 22 '15 at 18:43
  • 1
    Yes, for example with a second button-object in the bbar-array where you just use your two lines of code to add the osm-layer as handler function.But to have a default baselayer is probably also nice, isn't it? – Thomas B Jan 22 '15 at 18:54
  • 1
    Yes, just copy the object to something like bbar=[ { ... },{ ...}]; – Thomas B Jan 22 '15 at 19:14

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.