<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>mobile and gis dev notes &#187; openlayers</title>
	<atom:link href="http:///wordpress/category/gis-general/openlayers/feed/" rel="self" type="application/rss+xml" />
	<link>/wordpress</link>
	<description>by rupert</description>
	<lastBuildDate>Fri, 10 Feb 2012 05:27:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Using TileCache, OpenLayers, Mapserver for Projection 900913</title>
		<link>/wordpress/2008/04/using-tilecache-openlayers-mapserver-for-projection-900913/</link>
		<comments>/wordpress/2008/04/using-tilecache-openlayers-mapserver-for-projection-900913/#comments</comments>
		<pubDate>Tue, 08 Apr 2008 01:50:12 +0000</pubDate>
		<dc:creator>rupert</dc:creator>
				<category><![CDATA[mapserver]]></category>
		<category><![CDATA[openlayers]]></category>
		<category><![CDATA[tilecache]]></category>

		<guid isPermaLink="false">http://www.gisnotes.com/wordpress/?p=166</guid>
		<description><![CDATA[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&#8217;t have the exact errors with me right now, so I&#8217;m jotting this down from my head&#8230; Classic Resolutions problem. Use extent_type=loose Can not [...]]]></description>
			<content:encoded><![CDATA[<p>I had a few problems with <a href="www.tilecache.org">TileCache</a> 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&#8217;t have the exact errors with me right now, so I&#8217;m jotting this down from my head&#8230;</p>
<ol>
<li>Classic Resolutions problem. Use extent_type=loose</li>
<li>Can not set image type</li>
</ol>
<p>UPDATED (JAN 11, 2010): Classic Resolutions problem:</p>
<p>How are resolutions calculated? Assuming we have:</p>
<p>Original:<br />
	Lower Left (LL) or minx, miny: 12453557, -5434940<br />
	Upper Right (UR) or max, maxy: 16980842, -1180729</p>
<p>maxResolution = (max &#8211; minx)/tilesize = (16980842 &#8211; 12453557)/512 = 8842.353<br />
	where tilesize = 512.</p>
<p>Therefore, we can set/guess for max so that we have maxResolution as a whole number.</p>
<p>Adjusted:<br />
	minx, miny: 12453557, -5434940<br />
	maxx, maxy: 16980661, -1180729</p>
<p>gives a maxResolution (whole number) of 8842.</p>
<p>Now, you can use 8842 in both the TileCache.cfg and OpenLayers Javascript.<span id="more-166"></span><br />
<strong>A. Google BaseLayer + Road WMS Overlay = Validation approach before we proceed to TC.</strong></p>
<p>1. OpenLayers (OL) Code: <a href="http://www.gisnotes.com/platform/docs/examples/GoogleWMSRoads.cfm">http://www.gisnotes.com/platform/docs/examples/GoogleWMSRoads.cfm</a></p>
<p>2. Map File Configuration: <code>/home/map/beijing/new/beijing_google_roads</code></p>
<p>Well the above files are not exactly for TC, but it is a good demonstration that we could overlay our custom layers (WMS) on top of Google as the base layer. For a more detailed explanation regarding Google + OL, please read my previous <a href="/wordpress/index.php/2007/12/22/openlayers-google-spherical-mercator-example/">gisnote</a>. Also, this is a good test to see if our <a href="">Mapserver <em>mapfile</em> configuration</a> is correct. I do suggest not to proceed with OL + TC not unless you have validated the mapfile through OL (Google + WMS).</p>
<p><strong>B. Google900913 Tilecache as baselayer</strong></p>
<p>Ok.. so here it is..</p>
<p>1. OpenLayers Code: <a href="http://www.gisnotes.com/platform/docs/examples/TilecacheGoogle900913Base.cfm">http://www.gisnotes.com/platform/docs/examples/TilecacheGoogle900913Base.cfm</a></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">        window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
                        projection<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Projection</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;EPSG:900913&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
                        units<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;m&quot;</span><span style="color: #339933;">,</span>
&nbsp;
                        <span style="color: #006600; font-style: italic;">//maxResolution: 156543.0339,</span>
                        resolutions <span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">156543.03390000001</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">78271.516950000005</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">39135.758475000002</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">19567.879237500001</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">9783.9396187500006</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4891.9698093750003</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2445.9849046875001</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1222.9924523437501</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">611.49622617187504</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">305.74811308593752</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">152.87405654296876</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">76.43702827148438</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">38.21851413574219</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">19.109257067871095</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">9.5546285339355475</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4.7773142669677737</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2.3886571334838869</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1.1943285667419434</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0.59716428337097172</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0.29858214168548586</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
                        <span style="color: #006600; font-style: italic;">//zoom: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] @ numZoomLevels: 20</span>
                        numZoomLevels<span style="color: #339933;">:</span> <span style="color: #CC0000;">20</span><span style="color: #339933;">,</span>
                        <span style="color: #006600; font-style: italic;">//maxExtent: new OpenLayers.Bounds(12823075.86334, 4800551.12375, 13101918.14248, 5021301.26141)</span>
                        <span style="color: #006600; font-style: italic;">//maxExtent: new OpenLayers.Bounds(12823075, 4800551, 13101918, 5021301)</span>
                        <span style="color: #006600; font-style: italic;">//maxExtent: new OpenLayers.Bounds(12848138, 4785083, 13080212, 5021118.5)</span>
                        maxExtent<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Bounds</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span><span style="color: #CC0000;">20037508</span><span style="color: #339933;">,</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">20037508</span><span style="color: #339933;">,</span><span style="color: #CC0000;">20037508</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">20037508.34</span><span style="color: #009900;">&#41;</span>
                    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
            OpenLayers.<span style="color: #660066;">IMAGE_RELOAD_ATTEMPTS</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">;</span>
            OpenLayers.<span style="color: #660066;">Util</span>.<span style="color: #660066;">onImageLoadErrorColor</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;transparent&quot;</span><span style="color: #339933;">;</span>
&nbsp;
            map <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Map</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mapdiv'</span><span style="color: #339933;">,</span>options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #003366; font-weight: bold;">var</span> serverURL <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;/tilecache/tilecache.py&quot;</span><span style="color: #339933;">;</span>
            <span style="color: #006600; font-style: italic;">// start custom layer here</span>
            <span style="color: #003366; font-weight: bold;">var</span> layer_obj <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Layer</span>.<span style="color: #660066;">WMS</span><span style="color: #009900;">&#40;</span>
                <span style="color: #3366CC;">&quot;Beijing&quot;</span><span style="color: #339933;">,</span>
                serverURL<span style="color: #339933;">,</span>
                <span style="color: #009900;">&#123;</span>
                    layers<span style="color: #339933;">:</span> <span style="color: #3366CC;">'beijing_900913'</span><span style="color: #339933;">,</span>
                    map<span style="color: #339933;">:</span> <span style="color: #3366CC;">'/home/map/beijing/new/beijing_900913/beijing.map'</span><span style="color: #339933;">,</span>
                    format<span style="color: #339933;">:</span> <span style="color: #3366CC;">'image/jpg'</span><span style="color: #339933;">,</span>
                    <span style="color: #3366CC;">'transparent'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'off'</span>
                <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            layer_obj.<span style="color: #660066;">setIsBaseLayer</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            layer_obj.<span style="color: #660066;">setVisibility</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            map.<span style="color: #660066;">addLayer</span><span style="color: #009900;">&#40;</span>layer_obj<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>2. TileCache Configuration: /wwwroot/tilecache/tilecache.cfg</p>

<div class="wp_syntax"><div class="code"><pre class="cnf" style="font-family:monospace;">[beijing_900913]
type=WMSLayer
url=http://127.0.0.1/cgi-bin/mapserv?map=/home/map/beijing/new/beijing_900913/beijing.map
layers=beijing_900913
metatile=true
extension=jpg
levels=20
resolutions=156543.03390000001, 78271.516950000005, 39135.758475000002, 19567.879237500001, 9783.9396187500006, 4891.9698093750003, 2445.9849046875001, 1222.9924523437501, 611.49622617187504, 305.74811308593752, 152.87405654296876, 76.43702827148438, 38.21851413574219, 19.109257067871095, 9.5546285339355475, 4.7773142669677737, 2.3886571334838869, 1.1943285667419434, 0.59716428337097172, 0.29858214168548586
srs=EPSG:900913
bbox=-20037508, -20037508, 20037508, 20037508.34
#maxResolution=156543.0339
extent_type=loose
debug=on</pre></div></div>

<p>You can either set resolutions or maxResolutions. I always wanted to be explicit, so setting the <strong>resolutions</strong> is my preference.</p>
<p>3. MapFile Configuration: <code>/home/map/beijing/new/beijing_900913/beijing.map</code><br />
I have a long mapfile, and using <a href="http://mapserver.gis.umn.edu/docs/reference/mapfile/Include">includes</a> helped a lot, see my previous <a href="/wordpress/index.php/2007/08/19/103/">gisnote</a>.  For debugging your mapfile, read this <a href="/wordpress/index.php/2007/08/24/mapserver-debug-output/">post.</a></p>
<p><strong>Always Remember&#8230;I believe when they made TC, I presume they always tested on WGS84(lonlat), this means if you don&#8217;t set anything explicit, it would <em>implicitly</em> set settings in WGS84(lon/lat)&#8230;</strong></p>
<ul>
<li>Ensure that you have the vector data in the necessary projection, in my case it&#8217;s 900913.</li>
<p><br/> </p>
<li>Ensure that the <em>resolutions</em> from OL (B.1) is reflected in TC configuration (B.2).</li>
<p><br/></p>
<li>Ensure that the <em>maxextents</em> from OL (B.1) is reflected in TC configuration (B.2) as <em>bbox</em>.</li>
<p><br/>
</ul>
<p><strong>C. Still can&#8217;t get it running?</strong></p>
<p>1. Narrow down the error.</p>
<p>2. <strong>tail -f /var/log/apache2/error.log</strong> and <strong>access.log</strong> is your bestfriend. It&#8217;s a good starting point to trace down what went wrong.  If you can&#8217;t see it from Apache&#8217;s error.log then ensure that <a href="/wordpress/index.php/2007/07/25/installing-tilecache/">python debugging is turned on.</a></p>
<p>3. Sometimes TC <strong>[a]</strong> gives you an obvious error or <strong>[b]</strong> its just a link to the mapserv request. </p>
<p>Examples of <strong>[a]</strong>:</p>
<ul>
<li><em>Classic Resolution problem stated above. </em>- If you followed my final notes above, then this should not happen. If you&#8217;ve set up things correctly but it&#8217;s still broken and you want to pull your hair out, then do a clean test stated below in D.</li>
<li><em>Cannot set image type</em> &#8211; Check the extensions from the mapfile and TC config. Are they both in jpg&#8217;s?</li>
</ul>
<p>The latter <strong>[b]</strong> is harder to debug. Most likely its a mapserver mapfile mishap and the easiest way to hunt this down is only thru your error.log (note: you need mapserver to have a debug=true when you compiled it, that&#8217;s another story.)</p>
<p><strong>D. Doing a clean test as always</strong><br />
1. Always disable any caching when testing. Disable cache from your browser, for FF I use the webdeveloper toolbar. It&#8217;s as easy as Disable -> Disable Cache.</p>
<p>2. Stop/Start Apache. Hoping Python get&#8217;s a clean start as well. If you found any pyc (python compiled) under TC source directory&#8230; then stop Apache; remove the pycs; start Apache.</p>
<p>3. Seeing the same images? Always remove the image caches! rm -Rf /data/tilecache/beijing_900913</p>
]]></content:encoded>
			<wfw:commentRss>/wordpress/2008/04/using-tilecache-openlayers-mapserver-for-projection-900913/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ExtJS and OpenLayers</title>
		<link>/wordpress/2008/02/extjs-and-openlayers/</link>
		<comments>/wordpress/2008/02/extjs-and-openlayers/#comments</comments>
		<pubDate>Tue, 19 Feb 2008 00:45:18 +0000</pubDate>
		<dc:creator>rupert</dc:creator>
				<category><![CDATA[ExtJS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[openlayers]]></category>

		<guid isPermaLink="false">/wordpress/index.php/2008/02/19/extjs-and-openlayers/</guid>
		<description><![CDATA[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&#40; var i in blocks &#41; should be transformed to for&#40; var i = 0; i &#38;lt; [...]]]></description>
			<content:encoded><![CDATA[<p>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.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #000066; font-weight: bold;">in</span> blocks <span style="color: #009900;">&#41;</span> should be transformed to <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> blocks.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p>I believe <a href="http://trac.openlayers.org/ticket/1362">OpenLayers Ticket#1362</a> closely resembles this bug.  Thanks to pgiraud for pointing me to the right direction.</p>
]]></content:encoded>
			<wfw:commentRss>/wordpress/2008/02/extjs-and-openlayers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Reviving an old web map with Google Maps via OpenLayers</title>
		<link>/wordpress/2008/01/reviving-an-old-web-map-with-google-maps-via-openlayers/</link>
		<comments>/wordpress/2008/01/reviving-an-old-web-map-with-google-maps-via-openlayers/#comments</comments>
		<pubDate>Tue, 22 Jan 2008 01:10:09 +0000</pubDate>
		<dc:creator>rupert</dc:creator>
				<category><![CDATA[openlayers]]></category>
		<category><![CDATA[google]]></category>

		<guid isPermaLink="false">/wordpress/?p=136</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.gisnotes.com/wordpress/wp-content/uploads/2008/01/travelsite.jpg" title="Travelsite.ph with Google"><img src="http://www.gisnotes.com/wordpress/wp-content/uploads/2008/01/travelsite.jpg" alt="Travelsite.ph with Google" /></a></p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Here&#8217;s a quick reminder to myself&#8230;</p>
<p>A. Google WGS 84 Example.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
					projection<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;EPSG:4326&quot;</span><span style="color: #339933;">,</span>
					numZoomLevels<span style="color: #339933;">:</span> <span style="color: #CC0000;">19</span><span style="color: #339933;">,</span>
					maxExtent<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Bounds</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">120.8774</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">14.3684</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">121.1628</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">14.7931</span><span style="color: #009900;">&#41;</span>
&nbsp;
				<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// avoid pink tiles</span>
		OpenLayers.<span style="color: #660066;">IMAGE_RELOAD_ATTEMPTS</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">;</span>
		OpenLayers.<span style="color: #660066;">Util</span>.<span style="color: #660066;">onImageLoadErrorColor</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;transparent&quot;</span><span style="color: #339933;">;</span>
		map <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Map</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mapdiv'</span><span style="color: #339933;">,</span>options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		sat_wms <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Layer</span>.<span style="color: #660066;">Google</span><span style="color: #009900;">&#40;</span>
					<span style="color: #3366CC;">&quot;Layer&quot;</span><span style="color: #339933;">,</span>
					<span style="color: #009900;">&#123;</span>type<span style="color: #339933;">:</span> G_SATELLITE_MAP<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		map.<span style="color: #660066;">addLayer</span><span style="color: #009900;">&#40;</span>sat_wms<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		map.<span style="color: #660066;">addControl</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Control</span>.<span style="color: #660066;">MousePosition</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		map.<span style="color: #660066;">addControl</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Control</span>.<span style="color: #660066;">LayerSwitcher</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		map.<span style="color: #660066;">addControl</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Control</span>.<span style="color: #660066;">Scale</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> center <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">LonLat</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">121.06504</span><span style="color: #339933;">,</span><span style="color: #CC0000;">14.65495</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		map.<span style="color: #660066;">setCenter</span><span style="color: #009900;">&#40;</span>center<span style="color: #339933;">,</span> <span style="color: #CC0000;">16</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span></pre></div></div>

<p>B. Google Mercator Projection</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">		window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
						projection<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;EPSG:900913&quot;</span><span style="color: #339933;">,</span>
						units<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;m&quot;</span><span style="color: #339933;">,</span>
						maxResolution<span style="color: #339933;">:</span> <span style="color: #CC0000;">156543.0339</span><span style="color: #339933;">,</span>
						numZoomLevels<span style="color: #339933;">:</span> <span style="color: #CC0000;">19</span><span style="color: #339933;">,</span>
						maxExtent<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Bounds</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">12823075.86334</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4800551.12375</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">13101918.14248</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">5021301.26141</span><span style="color: #009900;">&#41;</span>
					<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">// avoid pink tiles</span>
			OpenLayers.<span style="color: #660066;">IMAGE_RELOAD_ATTEMPTS</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">;</span>
			OpenLayers.<span style="color: #660066;">Util</span>.<span style="color: #660066;">onImageLoadErrorColor</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;transparent&quot;</span><span style="color: #339933;">;</span>
			map <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Map</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mapdiv'</span><span style="color: #339933;">,</span>options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			sat_wms <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Layer</span>.<span style="color: #660066;">Google</span><span style="color: #009900;">&#40;</span>
						<span style="color: #3366CC;">&quot;Layer&quot;</span><span style="color: #339933;">,</span>
						<span style="color: #009900;">&#123;</span>type<span style="color: #339933;">:</span> G_SATELLITE_MAP<span style="color: #339933;">,</span><span style="color: #3366CC;">'sphericalMercator'</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			map.<span style="color: #660066;">addLayer</span><span style="color: #009900;">&#40;</span>sat_wms<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">// start custom layer here</span>
			<span style="color: #003366; font-weight: bold;">var</span> layer_obj <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Layer</span>.<span style="color: #660066;">WMS</span><span style="color: #009900;">&#40;</span>
				<span style="color: #3366CC;">&quot;Beijing&quot;</span><span style="color: #339933;">,</span>
				<span style="color: #3366CC;">&quot;http://127.0.0.1/cgi-bin/mapserv&quot;</span><span style="color: #339933;">,</span>
				<span style="color: #009900;">&#123;</span>
					layers<span style="color: #339933;">:</span> <span style="color: #3366CC;">'beijing_all'</span><span style="color: #339933;">,</span>
					map<span style="color: #339933;">:</span> <span style="color: #3366CC;">'/home/map/beijing/new/beijing_google.map'</span><span style="color: #339933;">,</span>
					format<span style="color: #339933;">:</span> <span style="color: #3366CC;">'AGG'</span><span style="color: #339933;">,</span>
					<span style="color: #3366CC;">'transparent'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'true'</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			layer_obj.<span style="color: #660066;">setIsBaseLayer</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			layer_obj.<span style="color: #660066;">setVisibility</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
&nbsp;
			map.<span style="color: #660066;">addLayer</span><span style="color: #009900;">&#40;</span>layer_obj<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			map.<span style="color: #660066;">addControl</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Control</span>.<span style="color: #660066;">MousePosition</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			map.<span style="color: #660066;">addControl</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Control</span>.<span style="color: #660066;">LayerSwitcher</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			map.<span style="color: #660066;">addControl</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Control</span>.<span style="color: #660066;">Scale</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> center <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">LonLat</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">12956625.68367</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4852316.90682</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			map.<span style="color: #660066;">setCenter</span><span style="color: #009900;">&#40;</span>center<span style="color: #339933;">,</span> <span style="color: #CC0000;">18</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span></pre></div></div>

<p>What&#8217;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&#8217;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 <a href="/wordpress/?p=129">blog post</a>.</p>
]]></content:encoded>
			<wfw:commentRss>/wordpress/2008/01/reviving-an-old-web-map-with-google-maps-via-openlayers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>OpenLayers + Google Spherical Mercator Example</title>
		<link>/wordpress/2007/12/openlayers-google-spherical-mercator-example/</link>
		<comments>/wordpress/2007/12/openlayers-google-spherical-mercator-example/#comments</comments>
		<pubDate>Sat, 22 Dec 2007 11:42:18 +0000</pubDate>
		<dc:creator>rupert</dc:creator>
				<category><![CDATA[GIS]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[openlayers]]></category>

		<guid isPermaLink="false">/wordpress/?p=129</guid>
		<description><![CDATA[I&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.gisnotes.com/wordpress/wp-content/uploads/2007/12/openlayers_google.jpg" title="Road Overlay on Google Vector in Forbidden City and Tiananmen, Beijing, China"><img src="http://www.gisnotes.com/wordpress/wp-content/uploads/2007/12/openlayers_google.jpg" alt="Road Overlay on Google Vector in Forbidden City and Tiananmen, Beijing, China" /></a></p>
<p>I&#8217;ve been a dormant user of OpenLayers for months (4 months?) now and it was a surprise that the <a href="http://svn.openlayers.org/trunk/openlayers/">svn trunk</a> had huge differences from what I remember OL (2.4/5?) to be. One of the cool features that <a href="http://labs.metacarta.com/"></a> and the <a href="http://trac.openlayers.org/">OpenLayers</a> 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.</p>
<p>1. We need to convert our data to <a href="http://trac.osgeo.org/gdal/ticket/1868">Google Projection (Spatial Reference System: 900913)</a>. This applies to whatever kind of data (mine is vector stored both in Mapinfo and PostGis) we have.  For PostGis, we need to:</p>

<div class="wp_syntax"><div class="code"><pre class="sql" style="font-family:monospace;"><span style="color: #993333; font-weight: bold;">INSERT</span> <span style="color: #993333; font-weight: bold;">INTO</span> spatial_ref_sys <span style="color: #66cc66;">&#40;</span>srid<span style="color: #66cc66;">,</span> auth_name<span style="color: #66cc66;">,</span> auth_srid<span style="color: #66cc66;">,</span> proj4text<span style="color: #66cc66;">,</span> srtext<span style="color: #66cc66;">&#41;</span> <span style="color: #993333; font-weight: bold;">VALUES</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">900913</span><span style="color: #66cc66;">,</span> 
&nbsp;
<span style="color: #ff0000;">'spatialreference.org'</span><span style="color: #66cc66;">,</span> <span style="color: #cc66cc;">900913</span><span style="color: #66cc66;">,</span> <span style="color: #ff0000;">'+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 
&nbsp;
+x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'</span><span style="color: #66cc66;">,</span> <span style="color: #ff0000;">'PROJCS
&nbsp;
[&quot;unnamed&quot;,GEOGCS[&quot;unnamed ellipse&quot;,DATUM[&quot;unknown&quot;,SPHEROID[&quot;unnamed&quot;,6378137,0]],PRIMEM
&nbsp;
[&quot;Greenwich&quot;,0],UNIT[&quot;degree&quot;,0.0174532925199433]],PROJECTION[&quot;Mercator_2SP&quot;],PARAMETER
&nbsp;
[&quot;standard_parallel_1&quot;,0],PARAMETER[&quot;central_meridian&quot;,0],PARAMETER
&nbsp;
[&quot;false_easting&quot;,0],PARAMETER[&quot;false_northing&quot;,0],UNIT[&quot;Meter&quot;,1],EXTENSION
&nbsp;
[&quot;PROJ4&quot;,&quot;+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 
&nbsp;
+units=m +nadgrids=@null +wktext  +no_defs&quot;]]'</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #993333; font-weight: bold;">SELECT</span> AddGeometryColumn<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'public'</span><span style="color: #66cc66;">,</span><span style="color: #ff0000;">'roads'</span><span style="color: #66cc66;">,</span><span style="color: #ff0000;">'the_geom_google'</span><span style="color: #66cc66;">,</span><span style="color: #cc66cc;">900913</span><span style="color: #66cc66;">,</span><span style="color: #ff0000;">'LINESTRING'</span><span style="color: #66cc66;">,</span><span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#41;</span>; 
&nbsp;
<span style="color: #993333; font-weight: bold;">UPDATE</span> roads <span style="color: #993333; font-weight: bold;">SET</span> the_geom_google <span style="color: #66cc66;">=</span> Transform<span style="color: #66cc66;">&#40;</span>the_geom<span style="color: #66cc66;">,</span> <span style="color: #cc66cc;">900913</span><span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<p>2. MapFile Settings courtesy of <a href="http://spatialreference.org/ref/user/google-projection/">SpatialReference: Google Projection</a></p>

<div class="wp_syntax"><div class="code"><pre class="conf" style="font-family:monospace;">WEB
    #Other Web Config Settings goes here...
    &quot;wms_srs&quot;              &quot;EPSG:900913&quot;
END
&nbsp;
PROJECTION
    &quot;+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&quot;
END</pre></div></div>

<p>3. By ensuring that Mapserver has the new 900913 projection, problems such as <em>&#8220;msWMSLoadGetMapParams(): WMS server error. Invalid SRS given : SRS must be valid for all requested layers.&#8221;</em> or <em><a href="http://mapserver.gis.umn.edu/docs/error/proj-init-file">&#8220;msProcessProjection(): Projection library error. no options found in &#8216;init&#8217; file&#8221;</a></em> will be avoided.</p>

<div class="wp_syntax"><div class="code"><pre class="conf" style="font-family:monospace;">cd /ms4w/proj/nad/
gvim epsg
# GCS Voirol 1875 Degree
&amp;lt;104304&amp;gt; +proj=longlat +a=6378249.2 +b=6356514.999904194  no_defs &amp;lt;&amp;gt;
# GCS Voirol Unifie 1960 Degree
&amp;lt;104305&amp;gt; +proj=longlat +ellps=clrk80  no_defs &amp;lt;&amp;gt;
# Google Spherical Mercator
. . .
&amp;lt;900913&amp;gt; +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</pre></div></div>

<p>4. Below is an example WMS Request. Note: &#8220;SRS=EPSG 900913&#8243; is added; TRANSPARENT=true not TRANSPARENT=on; Check your BBOX settings for the correct extent.</p>

<div class="wp_syntax"><div class="code"><pre class="conf" style="font-family:monospace;">http://127.0.0.1/cgi-bin/mapserv?
LAYERS=beijing_all
&amp;amp;MAP=%2Fhome%2Fmap%2Fbeijing%2Fnew%2Fbeijing_google.map
&amp;amp;FORMAT=AGG
&amp;amp;TRANSPARENT=true
&amp;amp;SERVICE=WMS&amp;amp;VERSION=1.1.1&amp;amp;REQUEST=GetMap
&amp;amp;STYLES=
&amp;amp;EXCEPTIONS=application%2Fvnd.ogc.se_inimage
&amp;amp;SRS=EPSG%3A900913
&amp;amp;BBOX=12956687.788758555,4852222.554861524,12956993.536871642,4852528.30297461
&amp;amp;WIDTH=256&amp;amp;HEIGHT=256</pre></div></div>

<p>5. Requesting the WMS from OpenLayers.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #003366; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
			projection<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;EPSG:900913&quot;</span><span style="color: #339933;">,</span>
			units<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;m&quot;</span><span style="color: #339933;">,</span>
			<span style="color: #006600; font-style: italic;">//maxResolution: 156543.0339,</span>
			numZoomLevels<span style="color: #339933;">:</span> <span style="color: #CC0000;">18</span><span style="color: #339933;">,</span>
			maxExtent<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Bounds</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">12823075.86334</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4800551.12375</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">13101918.14248</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">021301.26141</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// avoid pink tiles</span>
	OpenLayers.<span style="color: #660066;">IMAGE_RELOAD_ATTEMPTS</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">;</span>
	OpenLayers.<span style="color: #660066;">Util</span>.<span style="color: #660066;">onImageLoadErrorColor</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;transparent&quot;</span><span style="color: #339933;">;</span>
	map <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Map</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mapdiv'</span><span style="color: #339933;">,</span>options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	sat_wms <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Layer</span>.<span style="color: #660066;">Google</span><span style="color: #009900;">&#40;</span>
				<span style="color: #3366CC;">&quot;Layer&quot;</span><span style="color: #339933;">,</span>
				<span style="color: #009900;">&#123;</span>type<span style="color: #339933;">:</span> G_SATELLITE_MAP<span style="color: #339933;">,</span><span style="color: #3366CC;">'sphericalMercator'</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	map.<span style="color: #660066;">addLayer</span><span style="color: #009900;">&#40;</span>sat_wms<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// start custom layer here</span>
	<span style="color: #003366; font-weight: bold;">var</span> layer_obj <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Layer</span>.<span style="color: #660066;">WMS</span><span style="color: #009900;">&#40;</span>
		<span style="color: #3366CC;">&quot;Beijing&quot;</span><span style="color: #339933;">,</span>
		<span style="color: #3366CC;">&quot;http://127.0.0.1/cgi-bin/mapserv&quot;</span><span style="color: #339933;">,</span>
		<span style="color: #009900;">&#123;</span>
			layers<span style="color: #339933;">:</span> <span style="color: #3366CC;">'beijing_all'</span><span style="color: #339933;">,</span>
			map<span style="color: #339933;">:</span> <span style="color: #3366CC;">'/home/map/beijing/new/beijing_google.map'</span><span style="color: #339933;">,</span>
			format<span style="color: #339933;">:</span> <span style="color: #3366CC;">'AGG'</span><span style="color: #339933;">,</span>
			<span style="color: #3366CC;">'transparent'</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">'true'</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	layer_obj.<span style="color: #660066;">setIsBaseLayer</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	layer_obj.<span style="color: #660066;">setVisibility</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
&nbsp;
        map.<span style="color: #660066;">addLayer</span><span style="color: #009900;">&#40;</span>layer_obj<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	map.<span style="color: #660066;">addControl</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Control</span>.<span style="color: #660066;">MousePosition</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	map.<span style="color: #660066;">addControl</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Control</span>.<span style="color: #660066;">LayerSwitcher</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	map.<span style="color: #660066;">addControl</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">Control</span>.<span style="color: #660066;">Scale</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> center <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> OpenLayers.<span style="color: #660066;">LonLat</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">12956625.68367</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4852316.90682</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	map.<span style="color: #660066;">setCenter</span><span style="color: #009900;">&#40;</span>center<span style="color: #339933;">,</span> <span style="color: #CC0000;">17</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>/wordpress/2007/12/openlayers-google-spherical-mercator-example/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Processing Mapinfo Raster JPEG Images using GDAL</title>
		<link>/wordpress/2007/06/processing-mapinfo-raster-jpeg-images-using-gdal/</link>
		<comments>/wordpress/2007/06/processing-mapinfo-raster-jpeg-images-using-gdal/#comments</comments>
		<pubDate>Thu, 14 Jun 2007 12:25:30 +0000</pubDate>
		<dc:creator>rupert</dc:creator>
				<category><![CDATA[GDAL/OGR]]></category>
		<category><![CDATA[mapserver]]></category>
		<category><![CDATA[openlayers]]></category>
		<category><![CDATA[gdal]]></category>
		<category><![CDATA[mapinfo]]></category>
		<category><![CDATA[raster]]></category>

		<guid isPermaLink="false">/wordpress/?p=59</guid>
		<description><![CDATA[I have a couple of sat images (raw jpegs) from Google that I want to use with Openlayers/Mapserver. The raw jpegs were registered using Mapinfo via GCP (Ground Control Points). Mapinfo Raster JPEG Images example: rupert@rupert-winxp /e/home/map/beijing/new/satimages$ ll -rw-r&#8211;r&#8211; 1 rupert None 358 Jan 30 03:23 2NE1.TAB -rw-r&#8211;r&#8211; 1 rupert None 7.1M Jan 30 02:38 [...]]]></description>
			<content:encoded><![CDATA[<p>I have a couple of sat images (raw jpegs) from Google that I want to use with Openlayers/Mapserver.  The raw jpegs were registered using Mapinfo via GCP (Ground Control Points).</p>
<p>Mapinfo Raster JPEG Images example:</p>
<p>rupert@rupert-winxp /e/home/map/beijing/new/satimages$ ll<br />
-rw-r&#8211;r&#8211; 1 rupert None  358 Jan 30 03:23 2NE1.TAB<br />
-rw-r&#8211;r&#8211; 1 rupert None 7.1M Jan 30 02:38 2NE1.jpg<br />
-rw-r&#8211;r&#8211; 1 rupert None  356 Feb  1 18:56 2NE2a.TAB<br />
-rw-r&#8211;r&#8211; 1 rupert None 3.8M Feb  1 08:57 2NE2a.jpg</p>
<p>You cannot fully reference 2NE1.TAB as a Mapserver Layer. I tried to use 2NE1.jpg, but the problem its not georeferenced.</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">rupert@rupert-winxp /e/home/map/beijing/new/satimages
$ gdalinfo 2NE1.jpg
Driver: JPEG/JPEG JFIF
Size is 8650, 6744
Coordinate System is `'
Corner Coordinates:
Upper Left  (    0.0,    0.0)
Lower Left  (    0.0, 6744.0)
Upper Right ( 8650.0,    0.0)
Lower Right ( 8650.0, 6744.0)
Center      ( 4325.0, 3372.0)
Band 1 Block=8650x1 Type=Byte, ColorInterp=Red
Band 2 Block=8650x1 Type=Byte, ColorInterp=Green
Band 3 Block=8650x1 Type=Byte, ColorInterp=Blue</pre></div></div>

<p>The georeference coordinates of 2NE1.jpg, just like an ESRI World File, is found in 2NE1.TAB&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">rupert@rupert-winxp /e/home/map/beijing/new/satimages
$ cat 2NE1.TAB
!table
!version 300
!charset WindowsLatin1
&nbsp;
Definition Table
  File &quot;2ne1.jpg&quot;
  Type &quot;RASTER&quot;
  (116.38575,39.906105) (349,6619) Label &quot;Pt 1&quot;,
  (116.390072,39.93201) (1160,317) Label &quot;Pt 2&quot;,
  (116.42786,39.932296) (8210,253) Label &quot;Pt 3&quot;,
  (116.4295878,39.90722318) (8522,6358) Label &quot;Pt 4&quot;
  CoordSys Earth Projection 1, 0
  Units &quot;degree&quot;</pre></div></div>

<p>I found hurting myself in trying to create an ESRI world file from the current MAPINFO Raster TABS. So, I decided to go for GeoTIFF since its native in Mapserver. Using GDAL utilities my only problem is how to put a coordinate system and reference to the raster.</p>
<p>On windows, you could use <a href="http://fwtools.maptools.org">Frank&#8217;s FWTools.</a> For Linux, compile GDAL by source with python would be extremely helpful later on.  For installation of GDAL on Linux, we can use <a href="http://mapserver.gis.umn.edu/docs/howto/verboselinuxinstall/">Mapserver&#8217;s Verbose Installation in Linux Guide.</a></p>
<p><strong><a href="http://www.gdal.org/">GDAL</a> &#8211; the saviour!</strong>.</p>
<p><a href="http://www.gdal.org/gdal_utilities.html">GDAL utilities</a> is extremely helpful in reprojection, scaling, image mosaics, etc.  For now, we will use <a href="http://www.gdal.org/gdal_translate.html">gdal_translate</a> and <a href="http://www.gdal.org/gdalwarp.html">gdal_warp</a>.  Please RTFM the utilities.</p>
<p>1. Using gdal_translate to specify the gcp&#8217;s registered in Mapinfo.</p>
<blockquote><p>     <strong>gdal_translate -gcp pixel line easting northing</strong><br />
Add the indicated ground control point to the output dataset. This option may be provided multiple times to provide a set of GCPs.</p></blockquote>
<p><code><br />
<strong><br />
$ gdal_translate -gcp 349 6619 116.38575 39.906105 -gcp 1160 317 116.390072 39.93201 -gcp 8210 253 116.42786 39.932296 -gcp 8522 6358 116.4295878 39.90722318 -of GTiff 2NE1.jpg 2NE1translated.tif<br />
</strong><br />
Input file size is 8650, 6744<br />
0...10...20...30...40...50...60...70...80...90...100 - done.<br />
</code></p>
<p>Note: even if we specify the gcp&#8217;s, gdal_translate would not specify the corner coordinates of the tiff.</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">rupert@rupert-winxp /e/home/map/beijing/new/satimages
$ gdalinfo 2NE1translated.tif
Driver: GTiff/GeoTIFF
Size is 8650, 6744
Coordinate System is `'
GCP Projection =
GCP[  0]: Id=1, Info=
          (349,6619) -&amp;gt; (116.38575,39.906105,0)
GCP[  1]: Id=2, Info=
          (1160,317) -&amp;gt; (116.390072,39.93201,0)
GCP[  2]: Id=3, Info=
          (8210,253) -&amp;gt; (116.42786,39.932296,0)
GCP[  3]: Id=4, Info=
          (8522,6358) -&amp;gt; (116.4295878,39.90722318,0)
Corner Coordinates:
Upper Left  (    0.0,    0.0)
Lower Left  (    0.0, 6744.0)
Upper Right ( 8650.0,    0.0)
Lower Right ( 8650.0, 6744.0)
Center      ( 4325.0, 3372.0)
Band 1 Block=8650x1 Type=Byte, ColorInterp=Red
Band 2 Block=8650x1 Type=Byte, ColorInterp=Green
Band 3 Block=8650x1 Type=Byte, ColorInterp=Blue</pre></div></div>

<p>2. Use gdalwarp to reproject using the gcp and specify the coordinates.</p>
<blockquote><p>The gdalwarp utility is an image mosaicing, reprojection and warping utility. The program can reproject to any supported projection, and can also apply GCPs stored with the image if the image is &#8220;raw&#8221; with control information.</p></blockquote>
<p><code><br />
<strong>$ gdalwarp -s_srs epsg:4326 -t_srs epsg:4326 2NE1translated.tif warped.tif</strong><br />
Creating output file that is 9422P x 5631L.<br />
Processing input file 2NE1translated.tif.<br />
:0...10...20...30...40...5050...60...70...80...90...<br />
</code></p>
<p>Let&#8217;s check after gdalwarp using gdalinfo&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">$ gdalinfo warped.tif
Driver: GTiff/GeoTIFF
Size is 9422, 5631
Coordinate System is:
GEOGCS[&quot;WGS 84&quot;,
    DATUM[&quot;WGS_1984&quot;,
        SPHEROID[&quot;WGS 84&quot;,6378137,298.2572235630016,
            AUTHORITY[&quot;EPSG&quot;,&quot;7030&quot;]],
        AUTHORITY[&quot;EPSG&quot;,&quot;6326&quot;]],
    PRIMEM[&quot;Greenwich&quot;,0],
    UNIT[&quot;degree&quot;,0.0174532925199433],
    AUTHORITY[&quot;EPSG&quot;,&quot;4326&quot;]]
Origin = (116.383841930499160,39.933342296341991)
Pixel Size = (0.000004927579869,-0.000004927579869)
Metadata:
  AREA_OR_POINT=Area
Corner Coordinates:
Upper Left  ( 116.3838419,  39.9333423) (116d23'1.83&quot;E, 39d56'0.03&quot;N)
Lower Left  ( 116.3838419,  39.9055951) (116d23'1.83&quot;E, 39d54'20.14&quot;N)
Upper Right ( 116.4302696,  39.9333423) (116d25'48.97&quot;E, 39d56'0.03&quot;N)
Lower Right ( 116.4302696,  39.9055951) (116d25'48.97&quot;E, 39d54'20.14&quot;N)
Center      ( 116.4070558,  39.9194687) (116d24'25.40&quot;E, 39d55'10.09&quot;N)
Band 1 Block=9422x1 Type=Byte, ColorInterp=Red
Band 2 Block=9422x1 Type=Byte, ColorInterp=Green
Band 3 Block=9422x1 Type=Byte, ColorInterp=Blue</pre></div></div>

<p>Sweet. Now, all we need to do is display the raster images in Mapserver/OpenLayers.</p>
<p><a href="http://mapserver.gis.umn.edu/docs/howto/raster_data">Specifying a raster image in Mapserver</a></p>
<blockquote><p> LAYER<br />
NAME &#8220;2NE1&#8243;<br />
DATA &#8220;satimages/2NE1.tif&#8221;<br />
TYPE RASTER<br />
STATUS DEFAULT<br />
END</p>
<p>LAYER<br />
NAME &#8220;2NE2&#8243;<br />
DATA &#8220;satimages/2NE2a.tif&#8221;<br />
TYPE RASTER<br />
STATUS DEFAULT<br />
END</p></blockquote>
<p>Here is the end result&#8230;<br />
<img src="/wordpress/images/gdal_warp.jpg" />.</p>
<p>Lessons learned, I tried to specify coordinate extents using gdal_translate -a_ullr ulx uly lrx lry.  Specifying the coordinates was subjective by just looking at the cursor location of the registered image in Mapinfo. <em>It is still best to use the GCP&#8217;s. Simply put, we need to be accurate in specifying corner coordinates in raster images to project them accurately.</em></p>
<p><img src="/wordpress/images/gdal_merge.jpg" />.</p>
]]></content:encoded>
			<wfw:commentRss>/wordpress/2007/06/processing-mapinfo-raster-jpeg-images-using-gdal/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>OpenLayers and Google Layer Zoom fix</title>
		<link>/wordpress/2007/02/openlayers-and-google-layer-zoom-fix/</link>
		<comments>/wordpress/2007/02/openlayers-and-google-layer-zoom-fix/#comments</comments>
		<pubDate>Tue, 20 Feb 2007 11:32:18 +0000</pubDate>
		<dc:creator>rupert</dc:creator>
				<category><![CDATA[openlayers]]></category>
		<category><![CDATA[google]]></category>

		<guid isPermaLink="false">/wordpress/?p=38</guid>
		<description><![CDATA[I have finally fixed the disappearing layer on the layer switch when we try to overlay the layer on top of Google. I edited Google.js to reflect the ff: &#160; MAX_ZOOM_LEVEL: 22, &#160; /** Hardcode these resolutions so that they are more closely * tied with the standard wms projection * * @final @type Array(float) [...]]]></description>
			<content:encoded><![CDATA[<p>I have finally fixed the disappearing layer on the layer switch when we try to overlay the layer on top of Google. I edited Google.js to reflect the ff:</p>

<div class="wp_syntax"><div class="code"><pre class="js" style="font-family:monospace;">&nbsp;
    MAX_ZOOM_LEVEL: 22,
&nbsp;
    /** Hardcode these resolutions so that they are more closely
     *   tied with the standard wms projection
     *
     * @final @type Array(float) */
/*    RESOLUTIONS: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125],*/
&nbsp;
RESOLUTIONS:[1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125,0.0000214576721191140625,0.000107288360595703125,0.0000053644182978515625,0.000002682209014892578125,0.0000013411045074462890625,0.00000067055225372314453125],</pre></div></div>

]]></content:encoded>
			<wfw:commentRss>/wordpress/2007/02/openlayers-and-google-layer-zoom-fix/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

