Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

How can I publish WFS openlayer with legend, have tried different examples such as http://api.geoext.org/1.0/examples/vector-legend.js. But when I tried using this firebug shows an error=> GeoExt.MapPanel is not a constructor and the polygon for which the legend is defined in the rule(rule_highlight1 and rule_highlight2) has disappeared from the WFS layers.

var india = new OpenLayers.Layer.WMS(
                "cite:india_state - Tiled", "http://localhost:8080/geoserver/cite/wms",
                {
                    LAYERS: 'cite:india_state',
                    EPSG:4326,
                    tiled: true,
                    tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                },
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: true,
                    opacity: 0.8,

                }
            );              
            var style = new OpenLayers.Style();
            var rule_highlight1 = new OpenLayers.Rule({
            title: "> 2000m",
            maxScaleDenominator: 3000000,
            filter: new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "classification",
                value: "1",
            }),
            symbolizer: {
                graphicName: "star",
                pointRadius: 8,
                fillColor: "#FE2EF7",
                graphicName: "star",
                fillOpacity: 0.6,
                strokeColor: "#FF0000",
                strokeWidth: 2,
                strokeDashstyle: "solid",
                label: " ${classification}",
                labelAlign: "cc",
                fontColor: "#000000",
                fontOpacity: 1,
                fontFamily: "Arial",
                fontSize: 16,
                fontWeight: "600"}
            });


            var rule_highlight2 = new OpenLayers.Rule({
            title: "< 2000m",
            maxScaleDenominator: 3000000,
            filter: new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "classification",
                value: "2",
            }),
            symbolizer: {
                fillColor: "#0040FF",
                graphicName: "star",
                pointRadius: 5,
                fillOpacity: 0.6,
                strokeColor: "#FF0000",
                strokeWidth: 2,
                strokeDashstyle: "solid",
                label: " ${classification}",
                labelAlign: "cc",
                fontColor: "#000000",
                fontOpacity: 1,
                fontFamily: "Arial",
                fontSize: 16,
                fontWeight: "600"}
            });
                          var rule_highlight3 = new OpenLayers.Rule({
                filter: new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "classification",
                value: "2",
            }),
            symbolizer: {
                fillColor: "#0040FF",
                fillOpacity: 0.6,
                strokeColor: "#FF0000",
                strokeWidth: 2,
                strokeDashstyle: "solid",
                label: " ${classification}",
                labelAlign: "cc",
                fontColor: "#000000",
                fontOpacity: 1,
                fontFamily: "Arial",
                fontSize: 16,
                fontWeight: "600"}
            });

            style.addRules([rule_highlight1,rule_highlight2,rule_highlight3]);
            var wfs_layer = new OpenLayers.Layer.Vector("fsa",{
            strategies: [new OpenLayers.Strategy.BBOX()],
            styleMap: style,
            visibility: true,
            protocol: new OpenLayers.Protocol.WFS({
            version: "1.1.0",
            srsName: "EPSG:4326",
            url: "http://localhost:8080/geoserver/cite/wms",
            featureNS :  "http://www.opengeospatial.net/cite",
            featureType: "india_state",
            extractAttributes: true,
            transparent:true
            })
            });

            map.addLayers([india,wfs_layer]);
            map.zoomToMaxExtent();


mapPanel = new GeoExt.MapPanel({
    renderTo: "map",
    border: false,
    layers: map,
    center: [6.3, 45.6],
    height: 256, // IE6 wants this
    zoom: 8
});

legendPanel = new GeoExt.LegendPanel({
    layerStore: mapPanel.layers,
    renderTo: "legend",
    border: false
});

});

Thanks!!!

share|improve this question
    
Are you using GeoExt? Have you referred to the GeoExt Js library along with the ExtJS library? –  Devdatta Tengshe Apr 30 '13 at 5:28
    
yes, I have added GeoExt Js library along with the ExtJS library –  user2189282 Apr 30 '13 at 22:28
    
Was this issue solved ? If so , How ? –  Alophind Oct 4 '13 at 17:14
    
Have you checked that the versions of Openlayers and GeoExt you are using support the controls you want to use? –  nmtoken Apr 18 at 9:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.