Client Zoom - OC's Testing Initial Zoom Level

by Mike Gifford

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script>
<script src="http://openconcept.ca/sites/openconcept.ca/files/openlayers/lib/OpenLayers.js"></script>
        <h1 id="title">Client Zoom - OC's Testing Initial Zoom Level</h1>
        <div id="tags">
            client zoom continuous zooming
        </div>
        <p id="shortdesc">

            This example demonstrates the <strong>"client zoom"</strong>
            functionality, where OpenLayers stretches the layer div when the
            resolution is not supported by that layer's tile service.

        </p>

        <div id="map"></div>

        <div id="docs">

            <p>

            The map of this example is configured with 22 resolutions, while
            the OSM tile server supports the first 19 resolutions only. When
            the zoom level is 19, 20 or 21 "client zoom" is applied to the OSM
            layer, i.e. the OSM layer div is stretched as necessary.  The map's
            initial zoom is 18. So if you zoom in using the zoom bar's "+"
            button you'll effectively trigger "client zoom".

            </p>

            <p>

            For demonstration purpose the map of this example has
            <code>fractionalZoom</code> set to true. So "client zoom" also
            applies if you choose arbitrary zoom levels using the slider of the
            zoom bar, or shift-drag boxes to zoom to arbitrary extents.
            "client zoom" therefore allows continous zooming for tiled layers.

            </p>

            <p>

            Enabling "client zoom" on a layer is done by passing
           ...

CSS

.olControlAttribution {
                bottom: 5px;
            }
            #map {
                width: 600px;
                height: 400px;
            }

JavaScript

jQuery(document).ready(function($) {

  var map;

    //Attach this new method to jQuery
    jQuery.fn.extend({
        //This is where you write your plugin's name
        myMap: function() {

        var lon = -75.34;
        var lat = 45.34;
        var zoom = 4;

        OpenLayers.Lang.setCode('en'); 

        map = new OpenLayers.Map('map', {
            div: jQuery(this).attr('id'),
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.MousePosition()
                ],
            numZoomLevels: 6
        });

        var wms = new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {
            layers: 'basic'
        });
        map.addLayers([wms]);

        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

        if (!map.getCenter()) {
            map.zoomToMaxExtent();
        }
            
        }
    });

jQuery('#map').myMap();

});