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><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br> <head><br> <style type="text/css"><br> #map {<br>
width: 60%;<br> height: 400px;<br> border: 1px solid black;<br> }<br> </style><br><br> <!-- this gmaps key generated for <a href="http://openlayers.org/dev/">http://openlayers.org/dev/
</a> --><br> <script src='<a href="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'">http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'
</a>></script><br> <!-- Localhost key --><br> <!-- <script src='<a href="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'">
http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'</a>></script>--><br> <!--script type="text/javascript" src="
<a href="http://clients.multimap.com/API/maps/1.1/metacarta_04">http://clients.multimap.com/API/maps/1.1/metacarta_04</a>"></script><br> <script src='<a href="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'">
http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'</a>></script><br> <script src="<a href="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers">http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers
</a>"></script--><br> <script src="<a href="http://openlayers.org/api/OpenLayers.js">http://openlayers.org/api/OpenLayers.js</a>"></script><br> <script type="text/javascript">
<br> <br> //var lon = 27.77344;<br> //var lat = -32.98448;<br> <br> var lon = 27.92725;<br> var lat = -33.00866;<br> var zoom = 5;<br> var map, markers;<br> var eastlondon = new
OpenLayers.LonLat(27.92725, -33.00866);<br> var bhisho = new OpenLayers.LonLat(27.43286, -32.85190);<br> <br><br> <br> function init(){<br> <br> //setup of the openlayer map area
<br> <br> //map = new OpenLayers.Map( $('map'), {controls:[]});<br> map = new OpenLayers.Map( $('map'), {controls:[], numZoomLevels: 19, minZoomLevel: 5, maxZoomLevel: 19});
<br> map.addControl(new OpenLayers.Control.PanZoomBar({div:$('zoomControl')}));<br> map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':true}));<br> map.addControl
(new OpenLayers.Control.MouseDefaults());<br> map.addControl( new OpenLayers.Control.MousePosition());<br> <br> <br> //load layers into the map area<br> <br> var wms = new
OpenLayers.Layer.WMS( "OpenLayers WMS", <br> "<a href="http://labs.metacarta.com/wms/vmap0">http://labs.metacarta.com/wms/vmap0</a>", <br> {layers: 'basic'} );
<br> var google = new OpenLayers.Layer.Google( "Google Map" , {type: G_NORMAL_MAP});<br> var googles = new OpenLayers.Layer.Google( "Google Satellite" , {type: G_SATELLITE_MAP });
<br> var googleh = new OpenLayers.Layer.Google( "Google Hybrid" , {type: G_HYBRID_MAP });<br> <br> //zoom to area around bufallocity eastern cape south africa<br> <br>
map.addLayers([google, googles, googleh,wms]);<br> map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);<br> <br><br> var options = {<br> layers: [wms.clone()],<br> minRatio: 20,
<br> maxRatio: 128<br> };<br> <br> //create an overview area<br> <br> var overview = new OpenLayers.Control.OverviewMap(options);<br> <br>
map.addControl(overview);<br> <br> map.setCenter(eastlondon, zoom);<br> <br> overview.maximizeControl();<br> };<br> <br> </script><br> </head><br> <body onload="init()">
<br> <h1><bold>---------</bold></h1><br> <div id="map", centre></div><br> </body><br></html><br clear="all"><br>-- <br>Sindile Bidla<br>Intengu Technologies
<br>