Just a couple of notes to onself using gdal: Use gdalwarp to reproject your GeoTIFF files! I wanted to use my own satellite images acquired from GeoEye, however, on some areas I wanted to use google sat images as well since I don’t have the coverage. In order to do so, I need to reproject the sat images to 900913. Note you need to specify this in your epsg file in my previous post.
rupert:beijing_900913_satellite rupert$ gdalinfo Mosaic_RGB.tif
Driver: GTiff/GeoTIFF
Files: Mosaic_RGB.tif
Size is 4248, 4553
Coordinate System is:
GEOGCS["WGS 84",
DATUM["WGS_1984",
SPHEROID["WGS 84",6378137,298.2572235630016,
AUTHORITY["EPSG","7030"]],
AUTHORITY["EPSG","6326"]],
PRIMEM["Greenwich",0],
UNIT["degree",0.0174532925199433],
AUTHORITY["EPSG","4326"]]
Origin = (116.291476140000000,40.025198500000002)
Pixel Size = (0.000046860000000,-0.000035970000000)
Metadata:
AREA_OR_POINT=Area
TIFFTAG_XRESOLUTION=100
TIFFTAG_YRESOLUTION=100
Image Structure Metadata:
INTERLEAVE=BAND
Corner Coordinates:
Upper Left ( 116.2914761, 40.0251985) (116d17'29.31"E, 40d 1'30.71"N)
Lower Left ( 116.2914761, 39.8614271) (116d17'29.31"E, 39d51'41.14"N)
Upper Right ( 116.4905374, 40.0251985) (116d29'25.93"E, 40d 1'30.71"N)
Lower Right ( 116.4905374, 39.8614271) (116d29'25.93"E, 39d51'41.14"N)
Center ( 116.3910068, 39.9433128) (116d23'27.62"E, 39d56'35.93"N)
Band 1 Block=4248x1 Type=Byte, ColorInterp=Red
Band 2 Block=4248x1 Type=Byte, ColorInterp=Green
Band 3 Block=4248x1 Type=Byte, ColorInterp=Bluerupert:beijing_900913_satellite rupert$ gdalwarp -s_srs epsg:4326 -t_srs epsg:900913 Mosaic_RGB.tif sat_4m_rgb.tif
Creating output file that is 4245P x 4556L.
Processing input file Mosaic_RGB.tif.
0...10...20...30...40...50...60...70...80...90...100 - done.
rupert:beijing_900913_satellite rupert$ gdalinfo sat_4m_rgb.tif
Driver: GTiff/GeoTIFF
Files: sat_4m_rgb.tif
Size is 4245, 4556
Coordinate System is:
PROJCS["Google Maps Global Mercator",
GEOGCS["WGS 84",
DATUM["WGS_1984",
SPHEROID["WGS 84",6378137,298.2572235630016,
AUTHORITY["EPSG","7030"]],
AUTHORITY["EPSG","6326"]],
PRIMEM["Greenwich",0],
UNIT["degree",0.0174532925199433],
AUTHORITY["EPSG","4326"]],
PROJECTION["Mercator_1SP"],
PARAMETER["central_meridian",0],
PARAMETER["scale_factor",1],
PARAMETER["false_easting",0],
PARAMETER["false_northing",0],
UNIT["metre",1,
AUTHORITY["EPSG","9001"]]]
Origin = (12945507.907502911984921,4869604.732793668285012)
Pixel Size = (5.219801430503303,-5.219801430503303)
Metadata:
AREA_OR_POINT=Area
Image Structure Metadata:
INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left (12945507.908, 4869604.733) (116d17'29.31"E, 40d12'53.10"N)
Lower Left (12945507.908, 4845823.317) (116d17'29.31"E, 40d 3'2.78"N)
Upper Right (12967665.965, 4869604.733) (116d29'25.89"E, 40d12'53.10"N)
Lower Right (12967665.965, 4845823.317) (116d29'25.89"E, 40d 3'2.78"N)
Center (12956586.936, 4857714.025) (116d23'27.60"E, 40d 7'58.12"N)
Band 1 Block=4245x1 Type=Byte, ColorInterp=Red
Band 2 Block=4245x1 Type=Byte, ColorInterp=Green
Band 3 Block=4245x1 Type=Byte, ColorInterp=Blue
I had a few problems with TileCache the other week which I am eager to blog about, since I knew for sure that later on, I might encounter the same. I don’t have the exact errors with me right now, so I’m jotting this down from my head…
- Classic Resolutions problem. Use extent_type=loose
- Can not set image type
UPDATED (JAN 11, 2010): Classic Resolutions problem:
How are resolutions calculated? Assuming we have:
Original:
Lower Left (LL) or minx, miny: 12453557, -5434940
Upper Right (UR) or max, maxy: 16980842, -1180729
maxResolution = (max – minx)/tilesize = (16980842 – 12453557)/512 = 8842.353
where tilesize = 512.
Therefore, we can set/guess for max so that we have maxResolution as a whole number.
Adjusted:
minx, miny: 12453557, -5434940
maxx, maxy: 16980661, -1180729
gives a maxResolution (whole number) of 8842.
Now, you can use 8842 in both the TileCache.cfg and OpenLayers Javascript. Read more…
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.
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.
I’ve been a dormant user of OpenLayers for months (4 months?) now and it was a surprise that the svn trunk had huge differences from what I remember OL (2.4/5?) to be. One of the cool features that and the OpenLayers community contributed was the Google Speherical Mercator hack. Below is a quick step tutorial on how I was able to overlay a custom WMS to Google (set as the baselayer). For this tutorial, I want to overlay a road layer on top of Google.
1. We need to convert our data to Google Projection (Spatial Reference System: 900913). This applies to whatever kind of data (mine is vector stored both in Mapinfo and PostGis) we have. For PostGis, we need to:
INSERT INTO spatial_ref_sys (srid, auth_name, auth_srid, proj4text, srtext) VALUES ( 900913,
'spatialreference.org', 900913, '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0
+x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs', 'PROJCS
["unnamed",GEOGCS["unnamed ellipse",DATUM["unknown",SPHEROID["unnamed",6378137,0]],PRIMEM
["Greenwich",0],UNIT["degree",0.0174532925199433]],PROJECTION["Mercator_2SP"],PARAMETER
["standard_parallel_1",0],PARAMETER["central_meridian",0],PARAMETER
["false_easting",0],PARAMETER["false_northing",0],UNIT["Meter",1],EXTENSION
["PROJ4","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0
+units=m +nadgrids=@null +wktext +no_defs"]]');
SELECT AddGeometryColumn('public','roads','the_geom_google',900913,'LINESTRING',2);
UPDATE roads SET the_geom_google = Transform(the_geom, 900913);2. MapFile Settings courtesy of SpatialReference: Google Projection
WEB
#Other Web Config Settings goes here...
"wms_srs" "EPSG:900913"
END
PROJECTION
"+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"
END3. By ensuring that Mapserver has the new 900913 projection, problems such as “msWMSLoadGetMapParams(): WMS server error. Invalid SRS given : SRS must be valid for all requested layers.” or “msProcessProjection(): Projection library error. no options found in ‘init’ file” will be avoided.
cd /ms4w/proj/nad/
gvim epsg
# GCS Voirol 1875 Degree
<104304> +proj=longlat +a=6378249.2 +b=6356514.999904194 no_defs <>
# GCS Voirol Unifie 1960 Degree
<104305> +proj=longlat +ellps=clrk80 no_defs <>
# Google Spherical Mercator
. . .
<900913> +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs
4. Below is an example WMS Request. Note: “SRS=EPSG 900913″ is added; TRANSPARENT=true not TRANSPARENT=on; Check your BBOX settings for the correct extent.
http://127.0.0.1/cgi-bin/mapserv?
LAYERS=beijing_all
&MAP=%2Fhome%2Fmap%2Fbeijing%2Fnew%2Fbeijing_google.map
&FORMAT=AGG
&TRANSPARENT=true
&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap
&STYLES=
&EXCEPTIONS=application%2Fvnd.ogc.se_inimage
&SRS=EPSG%3A900913
&BBOX=12956687.788758555,4852222.554861524,12956993.536871642,4852528.30297461
&WIDTH=256&HEIGHT=256
5. Requesting the WMS from OpenLayers.
var options = {
projection: "EPSG:900913",
units: "m",
//maxResolution: 156543.0339,
numZoomLevels: 18,
maxExtent: new OpenLayers.Bounds(12823075.86334, 4800551.12375, 13101918.14248, 021301.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, 17);