JSFiddle - React, Tailwind, and code Playground

by devdatta

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map"></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="STATE_NAME Like 'M%'">
                    <input type="submit" value="update">
                </form>
			</div>

CSS

#map{
	height: 300px;
    width: 600px;
}
 #cql {
    width: 200px;
}

JavaScript

var map;
var states

var geographic = new OpenLayers.Projection("EPSG:4326");
var mercator = new OpenLayers.Projection("EPSG:900913");


map = new OpenLayers.Map('map', {
    projection: mercator
});

var osm = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)");
states=new OpenLayers.Layer.WMS(
    "States", "http://demo.opengeo.org/geoserver/topp/wms",
    {
        LAYERS: 'topp:states',
        transparent: true
    },
    {
        isBaseLayer: false
    });

// update filter and redraw when form is submitted
updateFilter();
var form = document.getElementById("cql_form");
form.onsubmit = updateFilter;


map.addLayers([osm,states]);
map.addControl(new OpenLayers.Control.LayerSwitcher());

// if you want to use Geographic coords, transform to ESPG:900913
var ddBounds = new OpenLayers.Bounds(-120,20,-60,60);
map.zoomToExtent(ddBounds.transform(geographic, mercator));

function updateFilter() {
		var cql = document.getElementById("cql");
		
		// use a CQL parser for easy filter Validation
		var format = new OpenLayers.Format.CQL();
		
		//if filter exists, remove it
		//This will also be useful when empty filter is present
		if(states.params.CQL_FILTER){
			delete states.params.CQL_FILTER;
		}
	
		var filter;
		try {
			filter = format.read(cql.value); //we are just checking if we can parse it
		} catch (err) {
			if(cql.value!=""){ //no need to give alert when filter is empty
				alert("Filter cannot be parsed");
			}				
		}
		if (filter) {
			states.mergeNewParams({'CQL_FILTER':cql.value}) //add the cql filter to the Layer
		}
	
		//redraw the layer
		states.redraw({force:true});
		return  false;
	}