Making GeoJSON outputs from PostGIS

rupert — Sat, 23 Feb 2008 02:08:17 +0000

I have an internet/web application sitting on top of OpenLayers, ExtJS, ColdFusion and PostGreSQL/PostGIS. I can query the geometry from PostGIS thru ColdFusion without any problems. If you are in ColdFusion 7, then you need a postgresql driver installed, but I do suggest you use ColdFusion 8 as the driver is built-in.

To display the geometry, I typically use AsGML output from PostGIS and supply that path to OpenLayers. Although it works as expected, I need to invest in two (2) http calls to the server:

1st Request: Call search.cfm and get the attributes (name, address, tel_no, etc…). Afterwards, display the results on an Ext.Window.
2nd Request: Display the geometries on OpenLayers using GML.

We have decided in our organisation not to write out the javascript statements on AJAX calls but instead retrieve them as Data Objects (either XML or GeoJSON). Putting in javascript statements on AJAX calls seems harder to debug. GeoJSON is highly preferred for internet mapping applications since it has a unique ability to see the javascript objects quickly on the browser, making debugging easier.

I wrote a simple cfc below to be able to parse the geometry from PostGIS using AsText(geometry). The function accepts a geometry as string and returns a structure containing the type and the coordinates.

<cfcomponent displayname="GeoJSON" hint="I am a GeoJSON Component. I parse a geometry and return it as JSON" output="false">
 
	<cffunction name="init" access="public" output="false">
		<cfreturn>
	cfreturn>	
 
	cffunction><cffunction name="format" returntype="Struct" output="false">
		<cfargument name="geomtext" type="String" required="true">
		<cfset>
		cfset><cfset>
		cfset><cfset geometry="StructNew()">
		cfset><cfset>
		cfset><cfset>
		cfset><cfset>
		cfset><cfset>
		cfset><cfset>
 
		cfset><cfset geometry.type="Mid(arguments.geomtext,">
		cfset><cfset>
 
		cfset><cfset geomreplacedbrackets="Replace(arguments.geomtext,">
		cfset><cfset geomreplacedbrackets="Replace(geomReplacedBrackets,">
 
		<cfloop from="1" to="#Len(geomReplacedBrackets)#" index="i">
			<cfset curchar="Mid(geomReplacedBrackets,">
			<cfif>
				<cfset geometry.coordinates="geometry.coordinates">
	    		cfset><cfset secchar="Mid(geomReplacedBrackets,">
				<cfif> 
					<cfset posi="i"> 
					cfset><cfset posj="find(']',">
					cfset><cfset tempgeom="Mid(geomReplacedBrackets,">
					cfset><cfset i="posJ"> 
 
					cfset><cfset>
 
					<cfloop list="#tempGeom#" index="tempGeomIndex" delimiters=",">
						<cfset tempvalue="[">
						cfset><cfset geomreplaced="ListAppend(geomReplaced,">
					cfset>cfloop>cfset>
 
					<cfset geometry.coordinates="geometry.coordinates">
				cfset>cfif>cfset>cfif>cfset>cfloop>
			<cfelseif>
				<cfset geometry.coordinates="geometry.coordinates">
			cfset>cfelseif>cfset>
 
		<cfset geometry.coordinates="Replace(geometry.coordinates,">
 
		<cfif>
			<cfset geometry.coordinates="Replace(geometry.coordinates,">
			cfset><cfset geometry.coordinates="Replace(geometry.coordinates,">
		cfset>
 
		<cfreturn>
	cfreturn>cfif>cfset>
 
cfargument>cffunction>cfcomponent>

ExtJS QuickTip: Display other levels of a JSON object in a Grid

rupert — Mon, 18 Feb 2008 15:08:39 +0000

You can display an item anywhere in a JSON heirarchy/level in a Grid by using dot notation. I am beginning to like JSON as it is simply practical and amazing. To fully understand, please see geometry.type as an example.

{ "type": "FeatureCollection", "recordcount":6, "features": [ { "type":"Feature", "geometry":{ "type": "MULTIPOLYGON", "coordinates": [[[[116.368603,39.944314],[116.381069,39.94464],[116.388765,39.940265],[116.390376,39.939124],[116.391203,39.934381],[116.391784,39.930743],[116.387262,39.930638],[116.387507,39.93289],[116.383032,39.932688],[116.382581,39.933204],[116.37197,39.940531],[116.368603,39.944314]]]] }, "gid":16055, "cn_name":"后海", "py_name": "hou hai" } , { "type":"Feature", "geometry":{ "type": "MULTIPOLYGON", "coordinates": ....}

Here is the DataStore…

cs.GridPlace = function(){
    var _placeDataStore = new Ext.data.Store({
        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'features',
            totalProperty: 'recordcount',
            id: 'gid',
            fields: [
                'cn_name', 'py_name', 'geometry.type'
            ]
        })
    });
 
    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var cm = new Ext.grid.ColumnModel([{
           id: 'gid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "CN_NAME",
           width: 100,
           dataIndex: 'cn_name'
        },{
           id: 'gid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "PY_NAME",
           width: 100,
           dataIndex: 'py_name'
        },{
           id: 'gid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "GEOMTYPE",
           width: 100,
           dataIndex: 'geometry.type'
        }
    ]);

iphone and gis development notes » GeoJSON

Making GeoJSON outputs from PostGIS

ExtJS QuickTip: Display other levels of a JSON object in a Grid