The panning and zoom effects are very important actions related to the user navigation experience.
In Chapter 1, Web Mapping Basics, the recipe Moving around the map view shows how you can control and create the way the map can be panned.
In the same way you can control the transition effect between two zoom levels on the layers.
The
OpenLayers.Layer class has a transitionEffect property, which determines the effect applied to the layer when the zoom level is changed. For the moment only two values are allowed: null and resize.
The null value means no transition effect will be applied, because when you change the zoom level you probably see how the layer disappears until the tiles at the new zoom level are loaded.
With the resize value when we zoom into a level, the current tiles are resized, adapting to the new zoom, until the tiles at the new level are loaded in background. This way images are always visible and we avoid the ugly effect of seeing a blank map for a few seconds.
To change the zoom level, perform the following steps:
- Create an HTML file and include the required OpenLayers dependencies.
- For this recipe, we are going to add a checkbox button that allows us to change between the transition effects on a single layer, as follows:
Transition effect: <input dojoType="dijit.form.CheckBox" checked onChange="transitionEffect" /> Resize
- Next, add the
divelement, which holds the map as follows:<!-- Map DOM element --> <div id="ch2_transition_effect" style="width: 100%; height: 100%;"></div>
- Add the JavaScript that initializes the map and creates one WMS layer, as follows:
<!-- The magic comes here --> <script type="text/javascript"> // Create the map using the specified DOM element var map = new OpenLayers.Map("ch2_transition_effect"); // Add a WMS layer var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' }, { wrapDateLine: true, transitionEffect: 'resize' }); map.addLayer(wms); // Center map view map.setCenter(new OpenLayers.LonLat(0,0), 3); - Finally, put the function that will toggle the
transitionEffectproperty value, as follows:
As explained at the beginning of the recipe, all the magic is in the transitionEffect property.
As the property is specific to a layer and not an OpenLayers.Map property, if you want to apply the same effect to the whole map, you need to set it on all its contained layers.
One or more OpenLayers.Tile.Image forms a raster layer, so when it is rendered the real work to draw the tiles is made easy by the tiles themselves.
Although the transitionEffect is defined in the OpenLayers.Layer class (or subclasses), each individual tile is responsible for drawing the transition effect.
If you plan to create a new zoom transition effect, you will need to take a look at the OpenLayers.Tile.Image code as well.