<html>
<head>
</head>
<body class='hmmessage'><div dir='ltr'>
<style><!--
.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
font-size: 10pt;
font-family:Tahoma
}
--></style>
<div dir="ltr"><font style="font-size:10pt" color="#366092" face="Arial" size="2"><br id="ecxFontBreak"></font><font style="font-size: 10pt;" color="#1F497D" face="Arial" size="2">After googleing for a while 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 get the GeoJSON features that matches my search using the following code:<br><br>[code]<br>Ext.onReady(function() {<br> var map = new OpenLayers.Map();<br> var osm = new OpenLayers.Layer.OSM(<br> "OSM"<br> );<br> map.addLayer(osm);<br><br> var mappanel = new GeoExt.MapPanel({<br> region:"center",<br> height: 400,<br> width: 600,<br> map: map,<br> title: 'A Simple GeoExt Map'<br> });<br><br> var layerList = new GeoExt.tree.LayerContainer({<br> text: 'All Layers',<br> layerStore: mappanel.layers,<br> leaf: false,<br> expanded: true<br> });<br><br> var layerTree = new Ext.tree.TreePanel({<br> title: 'Map Layers',<br> maxWidth: 500,<br> region: "east",<br> collapsible: true,<br> collapsed: true,<br> root: layerList<br> });<br><br> var features = [];<br> var vecLayer = new OpenLayers.Layer.Vector("Results");<br> var select = new GeoExt.grid.FeatureSelectionModel();<br><br> // define the data source<br> var protocol = new OpenLayers.Protocol.HTTP({<br> url: 'http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom',<br>/* params: {<br> outputFormat: "json"<br> },<br> filterToParams: function (filter, params) {<br> if (filter.type === name)<br> return params;<br> },*/<br> format: new OpenLayers.Format.GeoJSON({<br> ignoreExtraDims: true,<br> 'internalProjection': new OpenLayers.Projection("EPSG:900913"),<br> 'externalProjection': new OpenLayers.Projection("EPSG:4326")<br> })<br> });<br>/* protocol.read({<br> callback: function(r){<br> console.log("received featured: " + r.features);<br> }<br> });*/<br><br> formPanel = new GeoExt.form.FormPanel({<br> title: "Place Name Search",<br> height: 150,<br> region: "north",<br> protocol: protocol,<br> items: [{<br> xtype: "textfield",<br> width: 200,<br> name: "station__like",<br> fieldLabel: "station <br />(use * and . for wildcards)",<br> allowBlank: false,<br> minLength: 1<br> }],<br> listeners: {<br> actioncomplete: function(form, action) {<br> features = action.response.features;<br> store.loadData(features);<br> vm=map.getLayersByName("Results");<br> if(vm.length===0){<br> vecLayer = new OpenLayers.Layer.Vector("Results");<br> map.addLayer(vecLayer);<br> store.bind(vecLayer);<br> select.bind(vecLayer);<br> }<br> }<br> },<br> buttons: [{text: 'search',<br> handler: function(){<br> formPanel.search();<br> }<br> }],<br> keys: [{ key: [Ext.EventObject.ENTER], <br> handler: function() {<br> formPanel.search();<br> }<br> }]<br> });<br> <br> var cols = [ {name: 'station', type: 'string'},<br> {name: 'survey', type: 'string'},<br> {name: 'type', type: 'string'},<br> {name: 'w_depth_m', type: 'float'},<br> {name: 'comments', type: 'string'},<br> {name: 'latitude', type: 'float'},<br> {name: 'longitude', type: 'float'}<br> ];<br><br> var reader = new GeoExt.data.FeatureReader({},cols);<br><br> var store = new GeoExt.data.FeatureStore({<br> reader: reader,<br> fields: cols,<br> autoLoad: false<br> });<br> // create grid panel configured with feature store<br> gridPanel = new Ext.grid.GridPanel({<br> title: "Results",<br> height: 500,<br> region:"center",<br> store: store,<br> columns: [{<br> header: "Station",<br> width: 100,<br> sortable: true,<br> dataIndex: "station"<br> }, {<br> header: "Survey",<br> width: 40,<br> sortable: true,<br> dataIndex: "survey"<br> }, {<br> header: "Type",<br> width: 40,<br> sortable: true,<br> dataIndex: "type"<br> }, {<br> header: "Water depth [m]",<br> width: 40,<br> sortable: true,<br> dataIndex: "w_depth_m"<br> }, {<br> header: "Comments",<br> width: 100,<br> align: 'right',<br> sortable: true,<br> dataIndex: "comments"<br> }],<br> sm: select<br> });<br><br> gridPanel.on('rowdblclick', function(g,rowIdx,r){<br> rec = store.getAt(rowIdx);<br> map.setCenter(<br> new OpenLayers.LonLat(<br> rec.get('longitude'),<br> rec.get('latitude')),<br> 10);<br> });<br><br> searchPanel = new Ext.Panel({<br> layout: "border",<br> region: "west",<br> collapsible: true,<br> width: 400,<br> items: [formPanel,gridPanel]<br> });<br> mainPanel = new Ext.Panel({<br> height: 600,<br> renderTo: "mainpanel",<br> <font style="" color="#0070C0"> <font style="" color="#366092"> layout: "border",</font></font><font style="" color="#366092"><br></font><font style="" color="#366092"> item</font><font style="" color="#366092">s: [searchPanel,mappanel,layerTree]</font><font style="" color="#366092"><br></font><font style="" color="#366092"> });</font><font style="" color="#366092"><br></font><font style="" color="#366092"><br></font><font style="" color="#366092">});</font><font style="" color="#366092"><br></font><font style="" color="#366092">[/code]</font><font style="" color="#366092"><br></font><font style="" color="#366092"><br></font><font style="" color="#366092">thanks to Eric Lemoine I understand that the PHP script I'm using for the postgis request (</font></font><font style="" color="#366092" face="Arial">update </font><font style="" color="#366092" face="Arial"><a href="https://gist.github.com/3763701" rel="nofollow">https://gist.github.com/3763701</a></font><font style="" color="#366092" face="Arial">)</font><font style="" color="#366092" face="Arial">, should</font><font style="" color="#366092" face="Arial"> 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.<br><br>Sorry for probably this very simple question but I'm just starting using GeoJSON and protocol.HTTP, I'd appreciate your support, thanks,<br><br>Gery<br></font><font style="font-size:10pt" color="#1F497D" face="Arial" size="2"><font style="" color="#366092"><br></font><font style="" color="#366092"><br></font><font style="" color="#366092"><br></font><font style="" color="#366092">_______</font><font style="" color="#366092">___________________________________________________________________________________</font><br>Piensa en el medio ambie<font style="" face="Arial">nte - mantenlo en la pantalla. NO lo imprimas si NO es necesario.</font></font><font style="font-size:10pt" color="#1F497D" face="Arial" size="2"><br></font><font style="font-size:10pt" color="#1F497D" face="Arial" size="2">Think green - keep it on the screen. Do NOT print if it is NOT necessary.</font><font style="font-size:10pt" color="#1F497D" face="Arial" size="2"><br></font><font style="font-size:10pt" color="#1F497D" face="Arial" size="2"><span id="ecxresult_box" class="ecxshort_text" lang="de"><span class="ecxhps">Denken Sie an</span> <span class="ecxhps">die Umwelt</span></span></font><font style="font-size:10pt" color="#1F497D" face="Arial" size="2"><span id="ecxresult_box" lang="de"><span class="ecxhps"></span> <span class="ecxhps">-</span> <span class="ecxhps">bewahren Sie es</span> <span class="ecxhps">auf dem Bildschirm.</span> <span class="ecxhps">Drucken Sie NICHT</span><span>, wenn</span> <span class="ecxhps">es NICHT notwendig ist</span><span>.</span></span></font><br></div>
</div></body>
</html>