Home > openlayers > Reviving an old web map with Google Maps via OpenLayers

Reviving an old web map with Google Maps via OpenLayers

January 22nd, 2008 rupert

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: ,
Comments are closed.