Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

After googling for many days and reading the OL documentation, I don't understand well how the filterToParams in OpenLayers.HTTP protocol should work, what I'm trying to do is to find and display the GeoJSON features (features stored in my postgis tables) that matches my search using the following code:

Ext.onReady(function() {
var map = new OpenLayers.Map();
var osm = new OpenLayers.Layer.OSM(

var mappanel = new GeoExt.MapPanel({
    height: 400,
    width: 600,
    map: map,
    title: 'A Simple GeoExt Map'

var layerList = new GeoExt.tree.LayerContainer({
    text: 'All Layers',
    layerStore: mappanel.layers,
    leaf: false,
    expanded: true

var layerTree = new Ext.tree.TreePanel({
    title: 'Map Layers',
    maxWidth: 500,
    region: "east",
    collapsible: true,
    collapsed: true,
    root: layerList

var features = [];
var vecLayer = new OpenLayers.Layer.Vector("Results");
var select = new GeoExt.grid.FeatureSelectionModel();

// define the data source
var protocol = new OpenLayers.Protocol.HTTP({
    url: 'http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom',
    params: {
        outputFormat: "json"
//        },
//        filterToParams: function (filter, params) {
//            if (filter.type === name)
//            return params;
//        },
    format: new OpenLayers.Format.GeoJSON({
        ignoreExtraDims: true,
        'internalProjection': new OpenLayers.Projection("EPSG:900913"),
        'externalProjection': new OpenLayers.Projection("EPSG:4326")
//        callback: function(r){
//            console.log("received featured: " + r.features);
//        }
//    });

formPanel = new GeoExt.form.FormPanel({
    title: "Place Name Search",
    height: 150,
    region: "north",
    protocol: protocol,
    items: [{
        xtype: "textfield",
        width: 200,
        name: "station__like",
        fieldLabel: "station <br />(use * and . for wildcards)",
        allowBlank: false,
        minLength: 1
    listeners: {
        actioncomplete: function(form, action) {
            features = action.response.features;
                vecLayer = new OpenLayers.Layer.Vector("Results");
    buttons: [{text: 'search',
        handler: function(){
    keys: [{ key: [Ext.EventObject.ENTER],
        handler: function() {

var cols = [ {name: 'station', type: 'string'},
            {name: 'survey', type: 'string'},
            {name: 'type', type: 'string'},
            {name: 'w_depth_m', type: 'float'},
            {name: 'comments', type: 'string'},
            {name: 'latitude', type: 'float'},
            {name: 'longitude', type: 'float'}

var reader = new{},cols);

var store = new{
    reader: reader,
    fields: cols,
    autoLoad: false
// create grid panel configured with feature store
gridPanel = new Ext.grid.GridPanel({
    title: "Results",
    height: 500,
    store: store,
    columns: [{
        header: "Station",
        width: 100,
        sortable: true,
        dataIndex: "station"
    }, {
        header: "Survey",
        width: 40,
        sortable: true,
        dataIndex: "survey"
    }, {
        header: "Type",
        width: 40,
        sortable: true,
        dataIndex: "type"
    }, {
        header: "Water depth [m]",
        width: 40,
        sortable: true,
        dataIndex: "w_depth_m"
    }, {
        header: "Comments",
        width: 100,
        align: 'right',
        sortable: true,
        dataIndex: "comments"
    sm: select

gridPanel.on('rowdblclick', function(g,rowIdx,r){
    rec = store.getAt(rowIdx);
        new OpenLayers.LonLat(

searchPanel = new Ext.Panel({
    layout: "border",
    region: "west",
    collapsible: true,
    width: 400,
    items: [formPanel,gridPanel]
mainPanel = new Ext.Panel({
    height: 600,
    renderTo: "mainpanel",
    layout: "border",
    items: [searchPanel,mappanel,layerTree]


the code above plot all the features no matter what I write in the search button, so it's not fetching any specific features based on the name I enter.

I think that the PHP script I'm using for the postgis request (update, should allow filtering the features I'm looking for (ie.WHERE ... LIKE ...). This script has a "parameters" option that should give this but so far it only throws an error (here is the reference:

Sorry for probably this very simple question but I'm just starting using GeoJSON and protocol.HTTP, I'd appreciate your support, thanks

share|improve this question
filterToParams - optional method to translate an OpenLayers.Filter object into an object that can be serialized as request query string provided. But I didn't see any objects of OpenLayers.Filter class in your code. – drnextgis Sep 28 '12 at 4:47
many thanks drnextgis for the reply, that's the thing I don't get, the PHP script I use is able to filter, if I use "localhost/…;; it generates all the features of my postgis tables as GeoJSON, but if I use "localhost/… ilike 'Ballena%'" it gives only the features where "Ballena" is in the "station" column. My question would be how to pass that "Ballena" word, thinking that only the "station" column would be queried, sounds logical? – Gery Sep 28 '12 at 17:19
to add the explained above, in Firebug I get this when I write "Ballena" (part of the name of one station) in the "Search" button: "localhost/…;, it'd be possible to get something like this?: "localhost/… ilike='%Ballena%'" once I write "Ballena" in the Search button? that (I think) would solve the filter problem from the "Search" button – Gery Sep 28 '12 at 17:20

Your Answer


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

Browse other questions tagged or ask your own question.