[OpenLayers-Users] Selecting a feature property with JSON

[Andrea Maschio]

> 	

Hi all, after a lot searching i solved the problem of selecting a  
field property in a feature with the help of the guys on #OpenLayers.

Let me explain:

I have a table, called kanagawa (that's tha main table of the  
pgrouting example application). My setup consist in geoserver  
providing WFS, OpenLayers and Postgis(Postgres + Postgis + PGRouting)

The table has two fields, source and target, who are needed for the  
routing calculations (for example shortest_path). So the needs, was to  
listen to the click of the user, to find the starting and ending point.

The problem with querying a WFS service, is that i could not pass the  
coordinates as parameter. The solution suggested by Cristopher was to  
create a small buffered bounding box, as shown here (see source)

http://boston.freemap.in/

Thanks to Christopher, i used this code to determine the bounding box,  
then the query found the correct results in WFS as well.

Now the point was to get them as json, so the final url was like

	/* Christopher's code to get the coords */
	var tolerance = new OpenLayers.Pixel(5, 5);
         var min_px = new OpenLayers.Pixel(
                             e.xy.x - tolerance.x, e.xy.y +  
tolerance.y);
         var max_px = new OpenLayers.Pixel(
                             e.xy.x + tolerance.x, e.xy.y -  
tolerance.y);
         var min_ll = map.getLonLatFromPixel(min_px);
         var max_ll = map.getLonLatFromPixel(max_px);

         write("coordinate:" + "minpx->" +min_px + "maxpx->" +max_px)
	/* building the url */
         url = '/geoserver/wfs?
				MAXFEATURES=20
				&SERVICE=WFS
				&VERSION=1.0.0
				&REQUEST=GetFeature
				&TYPENAME=topp:kanagawa
				&SRS=EPSG:4326
				&outputformat=json
				&BBOX='+min_ll.lon+','+min_ll.lat+','+max_ll.lon+','+max_ll.lat;

Then, calling the loadUrl function will make me get a  
response.responseText(), which will be something like:

{"type":"FeatureCollection","features": 
[{"type":"Feature","id":"kanagawa.49596","geometry": 
{"type":"MultiLineString","coordinates": 
[[[139.51621972222222,35.41993416666667], 
[139.51615916666668,35.41999611111111 
]]]},"geometry_name":"the_geom","properties":{"length": 
0.0000866261479180723,"x1":139.516219722222,"y1":35.4199341666667,"x2": 
139.516159166667,"y2":35.4199961111111,"source":34600,"target":34601}}
CUT]

I am using prototype.js in my prototype :) so it was easy to transform  
the json response in a javascript object:


var sourceSet=false;
var source, target;
function setSourceTarget(response) {
         	
         	var json = response.responseText.evalJSON();
         	if(!sourceSet){
         		source=json.features[0].properties.source;
         		$('startPoint').value=source; //this is the start field to  
see what's going on
         		sourceSet=true;
         	}else{
         	target = json.features[0].properties.target;
         	$('endPoint').value=target; //this is just the end field to  
see what's going on
         	sourceSet=false;
         	}
         	

         };

I hope this one day could be useful for someone :D


Andrea Maschio
http://www.superandrew.it