CQL Filter Example

http://openlayers.org/dev/examples/cql-format.html Note: Note working.

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://demo.opengeo.org/geoserver/wfs?service=WFS&amp;amp;version=1.0.0&amp;amp;request=GetFeature&amp;amp;typename=topp:states&amp;amp;outputFormat=json&amp;amp;format_options=callback:loadFeatures"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
        <h1 id="title">CQL Filter Example</h1>
        <div id="tags">
            CQL, filter
        </div>
        <p id="shortdesc">
            Demonstrate use the CQL filter.
        </p>
        <div id="map" class="smallmap"></div>
        <div id="docs">
            <p>
                Enter text for a CQL filter to update the features displayed.
                <br>
                <form name="cql_form" id="cql_form">
                    <label for="cql">CQL</label>
                    <input id="cql" type="text" value="NAME='DFCC DN Track'">
                    <input type="submit" value="update">
                    <input type="reset" value="reset">
                </form>
                <textarea id="output"></textarea>
            </p><p>
                View the <a href="cql-format.js" target="_blank">cql-format.js source</a> 
                to see how this is done.
            </p>
        </div>

  <br />
  <p>Note: Note working. <a href="http://openlayers.org/dev/examples/cql-format.html">Original
  OpenLayers Example</a>.</p>

CSS

#cql {
                width: 400px;
            }
            #output {
                padding-top: 1em;
                width: 512px;
                height: 60px;
                border: none;
                color: #ff3333;
            }

JavaScript

(function($) {

    // use a CQL parser for easy filter creation
    var format = new OpenLayers.Format.CQL();

    // this rule will get a filter from the CQL text in the form
    var rule = new OpenLayers.Rule({
        // We could also set a filter here.  E.g.
        // filter: format.read('STATE_ABBR >= 'B' AND STATE_ABBR <= 'O''),
        symbolizer: {
            fillColor: '#f00',
            strokeColor: '#fcc',
            fillOpacity: '0.5'
        }
    });

    var states = new OpenLayers.Layer.Vector('States', {
        styleMap: new OpenLayers.StyleMap({
            'default': new OpenLayers.Style(null, {
                rules: [rule]
            })
        })
    });

    var map = new OpenLayers.Map({
        div: 'map',
        layers: [
            new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://poms.lntecc.com:8081/geoserver/LnT-WS/wms', {
            layers: 'LnT-WS:DFCC_DN_T',
            format: 'image/png'
        }),
            states
            ],
        center: new OpenLayers.LonLat(74.31331, 26.50541,
        zoom: 3
    });

    // called when features are fetched

    function loadFeatures(data) {
        var features = new OpenLayers.Format.GeoJSON().read(data);
        states.addFeatures(features);
    }

    // update filter and redraw when form is submitted
    var cql = document.getElementById('cql');
    var output = document.getElementById('output');

    function updateFilter() {
        var filter;
        try {
            filter = format.read(cql.value);
        } catch (err) {
            output.value = err.message;
        }
        if (filter) {
            output.value = '';
            rule.filter = filter;
            states.redraw();
        }
        return false;
    }
    updateFilter();
    var form = document.getElementById('cql_form');
    form.onsubmit = updateFilter;

    init();
})(jQuery);