I have created a mapping application using the excellent examples provided in <a href="http://www.openlayers.org">www.openlayers.org</a>, any ideas on how I can improve on it (cosmetic effects), what I would want to do is:
<br>1. emulate the smoothness of google maps as one pans and zooms (I know this is done using caching - how do I define this in the code<br>2. change mouse pointer (to a hand when using the zoom in/out slider and have tooltips
<br>3. assistance with the overview windows as it is not consistence as one zooms in/out, i.e the size of the area as indicated by the red dotted rectangle (would like it to be consistence)<br><br>The suggestions from the community I could consolidate into a small howto.
<br><br>Here is the code:<br><br>&lt;html xmlns=&quot;<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>&quot;&gt;<br>&nbsp; &lt;head&gt;<br>&nbsp;&nbsp;&nbsp; &lt;style type=&quot;text/css&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #map {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 60%;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 400px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid black;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; &lt;/style&gt;<br><br>&nbsp;&nbsp;&nbsp; &lt;!-- this gmaps key generated for <a href="http://openlayers.org/dev/">http://openlayers.org/dev/
</a> --&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script src=&#39;<a href="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw&#39;">http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw&#39;
</a>&gt;&lt;/script&gt;<br>&nbsp;&nbsp;&nbsp; &lt;!-- Localhost key --&gt;<br>&nbsp;&nbsp;&nbsp; &lt;!-- &lt;script src=&#39;<a href="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg&#39;">
http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg&#39;</a>&gt;&lt;/script&gt;--&gt;<br>&nbsp;&nbsp;&nbsp; &lt;!--script type=&quot;text/javascript&quot; src=&quot;
<a href="http://clients.multimap.com/API/maps/1.1/metacarta_04">http://clients.multimap.com/API/maps/1.1/metacarta_04</a>&quot;&gt;&lt;/script&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script src=&#39;<a href="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js&#39;">
http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js&#39;</a>&gt;&lt;/script&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script src=&quot;<a href="http://api.maps.yahoo.com/ajaxymap?v=3.0&amp;appid=euzuro-openlayers">http://api.maps.yahoo.com/ajaxymap?v=3.0&amp;appid=euzuro-openlayers
</a>&quot;&gt;&lt;/script--&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script src=&quot;<a href="http://openlayers.org/api/OpenLayers.js">http://openlayers.org/api/OpenLayers.js</a>&quot;&gt;&lt;/script&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script type=&quot;text/javascript&quot;&gt;
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //var lon = 27.77344;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //var lat = -32.98448;<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var lon = 27.92725;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var lat = -33.00866;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var zoom = 5;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var map, markers;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var eastlondon = new 
OpenLayers.LonLat(27.92725, -33.00866);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var bhisho = new OpenLayers.LonLat(27.43286, -32.85190);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br><br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function init(){<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //setup of the openlayer map area
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //map = new OpenLayers.Map( $(&#39;map&#39;), {controls:[]});<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; map = new OpenLayers.Map( $(&#39;map&#39;), {controls:[], numZoomLevels: 19, minZoomLevel: 5, maxZoomLevel: 19});
<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; map.addControl(new OpenLayers.Control.PanZoomBar({div:$(&#39;zoomControl&#39;)}));<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; map.addControl(new OpenLayers.Control.LayerSwitcher({&#39;ascending&#39;:true}));<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; map.addControl
(new OpenLayers.Control.MouseDefaults());<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; map.addControl( new OpenLayers.Control.MousePosition());<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //load layers into the map area<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var wms = new 
OpenLayers.Layer.WMS( &quot;OpenLayers WMS&quot;, <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &quot;<a href="http://labs.metacarta.com/wms/vmap0">http://labs.metacarta.com/wms/vmap0</a>&quot;, <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {layers: &#39;basic&#39;} );
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var google = new OpenLayers.Layer.Google( &quot;Google Map&quot; , {type: G_NORMAL_MAP});<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var googles = new OpenLayers.Layer.Google( &quot;Google Satellite&quot; , {type: G_SATELLITE_MAP });
<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var googleh = new OpenLayers.Layer.Google( &quot;Google Hybrid&quot; , {type: G_HYBRID_MAP });<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //zoom to area around bufallocity eastern cape south africa<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; map.addLayers([google, googles, googleh,wms]);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var options = {<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; layers: [wms.clone()],<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; minRatio: 20,
<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; maxRatio: 128<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; };<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; //create an overview area<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var overview = new OpenLayers.Control.OverviewMap(options);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
map.addControl(overview);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; map.setCenter(eastlondon, zoom);<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; overview.maximizeControl();<br>&nbsp;&nbsp;&nbsp; };<br>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; &lt;/script&gt;<br>&nbsp; &lt;/head&gt;<br>&nbsp; &lt;body onload=&quot;init()&quot;&gt;
<br>&nbsp;&nbsp;&nbsp; &lt;h1&gt;&lt;bold&gt;---------&lt;/bold&gt;&lt;/h1&gt;<br>&nbsp;&nbsp;&nbsp; &lt;div id=&quot;map&quot;, centre&gt;&lt;/div&gt;<br>&nbsp; &lt;/body&gt;<br>&lt;/html&gt;<br clear="all"><br>-- <br>Sindile Bidla<br>Intengu Technologies
<br>