[OpenLayers-Users] Newbie: Ideas on improving my mapping application

Mon Nov 12 03:13:14 EST 2007

I have created a mapping application using the excellent examples provided
in www.openlayers.org, any ideas on how I can improve on it (cosmetic
effects), what I would want to do is:
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
2. change mouse pointer (to a hand when using the zoom in/out slider and
have tooltips
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)

The suggestions from the community I could consolidate into a small howto.

Here is the code:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
        #map {
            width: 60%;
            height: 400px;
            border: 1px solid black;
        }
    </style>

    <!-- this gmaps key generated for http://openlayers.org/dev/ -->
    <script src='
http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'
></script>
    <!-- Localhost key -->
    <!-- <script src='
http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'
></script>-->
    <!--script type="text/javascript" src="
http://clients.multimap.com/API/maps/1.1/metacarta_04"></script>
    <script src='http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'
></script>
    <script src="
http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers
"></script-->
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">

        //var lon = 27.77344;
        //var lat = -32.98448;

        var lon = 27.92725;
        var lat = -33.00866;
        var zoom = 5;
        var map, markers;
        var eastlondon = new OpenLayers.LonLat(27.92725, -33.00866);
        var bhisho = new OpenLayers.LonLat(27.43286, -32.85190);

        function init(){

            //setup of the openlayer map area

            //map = new OpenLayers.Map( $('map'), {controls:[]});
            map = new OpenLayers.Map( $('map'), {controls:[], numZoomLevels:
19, minZoomLevel: 5, maxZoomLevel: 19});
            map.addControl(new OpenLayers.Control.PanZoomBar
({div:$('zoomControl')}));
            map.addControl(new OpenLayers.Control.LayerSwitcher
({'ascending':true}));
            map.addControl(new OpenLayers.Control.MouseDefaults());
            map.addControl( new OpenLayers.Control.MousePosition());

            //load layers into the map area

            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                      "http://labs.metacarta.com/wms/vmap0",
                      {layers: 'basic'} );
            var google = new OpenLayers.Layer.Google( "Google Map" , {type:
G_NORMAL_MAP});
            var googles = new OpenLayers.Layer.Google( "Google Satellite" ,
{type: G_SATELLITE_MAP });
            var googleh = new OpenLayers.Layer.Google( "Google Hybrid" ,
{type: G_HYBRID_MAP });

            //zoom to area around bufallocity eastern cape south africa

            map.addLayers([google, googles, googleh,wms]);
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

            var options = {
            layers: [wms.clone()],
            minRatio: 20,
            maxRatio: 128
            };

            //create an overview area

            var overview = new OpenLayers.Control.OverviewMap(options);

            map.addControl(overview);

            map.setCenter(eastlondon, zoom);

            overview.maximizeControl();
    };

    </script>
  </head>
  <body onload="init()">
    <h1><bold>---------</bold></h1>
    <div id="map", centre></div>
  </body>
</html>

-- 
Sindile Bidla
Intengu Technologies
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20071112/4c14d948/attachment.html