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.