Archive

Archive for the ‘GIS’ Category

Making GeoJSON outputs from PostGIS

February 23rd, 2008 rupert Comments off

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.

Read more…

Categories: GeoJSON, javascript, postgis Tags: ,

ExtJS and OpenLayers

February 19th, 2008 rupert Comments off

It seems that ExtJS and OpenLayers does not blend well together. One of the bug biters that hit me was the way ExtJS was handling arrays. It would be wise for OpenLayers to be agnostic of these frameworks.

for( var i in blocks ) should be transformed to for( var i = 0; i < blocks.length; i++)

I believe OpenLayers Ticket#1362 closely resembles this bug. Thanks to pgiraud for pointing me to the right direction.

Categories: ExtJS, javascript, openlayers Tags: ,

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

February 18th, 2008 rupert Comments off

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. Read more…

Categories: ExtJS, GeoJSON, javascript Tags:

Reviving an old web map with Google Maps via OpenLayers

January 22nd, 2008 rupert Comments off

Travelsite.ph with Google

An old coworker and I worked on a travel portal for the Philippines called travelsite.ph about 4 years ago. We are now given a task of reviving the old web application and even adding mapping functionalities. Back then, the application was using ColdFusion 4.5 and MySQL 3.

Fingers crossed we dropped the app in a ColdFusion 6/7/8 environment with no changes at all. The app still works! Awesome.. how CF really progressed through the years with backward compatibility. The only changes we made was removing the registration/sign up for a quick demo. I just laughed at the oddities and the no brainer features (pertaining to security) that I made when I was starting out.

The database was also intact and have UTM coordinates. We dropped it to a Debian mysql 5 and works flawlessly since its MyISAM. I had the coordinates exported to lon/lat, so I could directly inject it to OpenLayers/Google. After two hours of fiddling around, I got mapping embedded.. hehe.. courtesy of OpenLayers ofcourse.

Here’s a quick reminder to myself…

A. Google WGS 84 Example.

	window.onload = function() {
		var options = {
					projection: "EPSG:4326",
					numZoomLevels: 19,
					maxExtent: new OpenLayers.Bounds(120.8774, 14.3684, 121.1628, 14.7931)
 
				};
 
		// avoid pink tiles
		OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
		OpenLayers.Util.onImageLoadErrorColor = "transparent";
		map = new OpenLayers.Map('mapdiv',options);
		sat_wms = new OpenLayers.Layer.Google(
					"Layer",
					{type: G_SATELLITE_MAP}
		);
 
		map.addLayer(sat_wms);
 
		map.addControl(new OpenLayers.Control.MousePosition();
		map.addControl(new OpenLayers.Control.LayerSwitcher());
		map.addControl(new OpenLayers.Control.Scale());
 
		var center = new OpenLayers.LonLat(121.06504,14.65495);
		map.setCenter(center, 16);
	}

B. Google Mercator Projection

		window.onload = function() {
			var options = {
						projection: "EPSG:900913",
						units: "m",
						maxResolution: 156543.0339,
						numZoomLevels: 19,
						maxExtent: new OpenLayers.Bounds(12823075.86334, 4800551.12375, 13101918.14248, 5021301.26141)
					};
 
			// avoid pink tiles
			OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
			OpenLayers.Util.onImageLoadErrorColor = "transparent";
			map = new OpenLayers.Map('mapdiv',options);
			sat_wms = new OpenLayers.Layer.Google(
						"Layer",
						{type: G_SATELLITE_MAP,'sphericalMercator': true}
			);
			map.addLayer(sat_wms);
 
			// start custom layer here
			var layer_obj = new OpenLayers.Layer.WMS(
				"Beijing",
				"http://127.0.0.1/cgi-bin/mapserv",
				{
					layers: 'beijing_all',
					map: '/home/map/beijing/new/beijing_google.map',
					format: 'AGG',
					'transparent': 'true'
				}
			);
			layer_obj.setIsBaseLayer(false);
			layer_obj.setVisibility(true);	
 
			map.addLayer(layer_obj);
 
			map.addControl(new OpenLayers.Control.MousePosition());
			map.addControl(new OpenLayers.Control.LayerSwitcher());
			map.addControl(new OpenLayers.Control.Scale());
			var center = new OpenLayers.LonLat(12956625.68367, 4852316.90682);
			map.setCenter(center, 18);
		}

What’s the difference between both snippets? Obviously projection is one. Since most of my point data is in lon/lat, then the WGS84 example is good if I don’t want to overlay custom precise data. Remember the x shift problem in Google with Openlayers. The Google Mercator example is used when I want to overlay more custom data, particularly polygons/line that needs to fit on Google Layers. For more details, please see my previous blog post.

Categories: openlayers Tags: ,

Passing Parameters to Mapserver

January 4th, 2008 rupert Comments off

I was bitten 4 hours searching for this in the mailing list. I have a postgis layer defined in mapserver map file as follows:

LAYER
        NAME "pois"
        STATUS DEFAULT
		GROUP "pois"
        TYPE POINT
 
		CONNECTIONTYPE postgis
		PROCESSING "CLOSE_CONNECTION=DEFER"
		CONNECTION "user=lbs password=xtlme15n dbname=beijing_stat host=192.168.1.211 port=5432"
		#DATA "the_geom from (SELECT poi_id, the_geom FROM poi WHERE new_block_id = 7) as foo USING UNIQUE poi_id USING SRID=4326"
		DATA "the_geom from poi as foo USING UNIQUE poi_id USING SRID=4326"
 
		FILTER "new_block_id=%myid%"
 
		CLASS
			NAME "block-pois"
    		        STYLE
				SYMBOL "circle"
     			        COLOR 255 0 0
				SIZE 10
   			END
  		END
END

Traditionally, I could append and change the FILTER attribute by passing it to the Mapserver CGI as follows:
map.pois.filter=new_block_id%3D700.

Apparently, this changed with Mapserver 5.0. Please see MapServer 4.10 to 5.0 Migration Guide. Thanks to this mailing list thread, it turned out that we need to pass a value to a custom variable set in the mapfile for security reasons. Hope this one, goes in to the docs. I was hoping to comment out in the Mapserver Documentation but registration is holding me off with a ‘Connection Refused’.

Categories: mapserver Tags: