ZoomToFeatures Control

Description

The ZoomToFeatures control provides a quick way to recenter the map on a collection of features inside a vector layer. It depends on the featuresadded and featuresremoved events which are present in OpenLayers.Layer.Vector.

It has the ability to auto-(de)activate itself:

• at startup, if features are already added to the vector layer.
• when features are added/removed

Compatibility

Addin Version	OpenLayers Version
sandbox	trunk > r?

Examples

•  zoomtofeatures.html - Using the ZoomToFeatures control

Installation and Use

1. Use subversion to check out the  zoomToFeatures/trunk/ addin.
2. Place the ZoomToFeatures.js file in your Control directory (or alternatively, place it elsewhere and add a <script> tag to your page that points to it).
3. Use the build tools to create a single file build (or link to your OpenLayers.js file to run in development mode).
4. Add a stylesheet to your page to style the ZoomToFeatures (see examples).
5. Construct a map, add a Panel to hold some buttons and add a ZoomToFeatures to it with the following syntax:

   var md = new OpenLayers.Control.MouseDefaults();
   var panel = new OpenLayers.Control.Panel({defaultControl: md});
   panel.addControls([
       md, 
       new OpenLayers.Control.ZoomToFeatures(vectorLayer, {
           title: "Zoom to features",
           maxZoomLevel: 12,
           ratio: 1.05,
           autoActivate: true
      }),
      new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent"}) 
   ]);
   map.addControl(panel);
   

Css example

The following css example shows how to set the css for the panel button

        .olControlPanel .olControlZoomToFeaturesItemActive { 
            width:  18px;  
            height: 18px;
            background: url("../theme/default/img/arrow_in_on.png") center no-repeat;
        }
        .olControlPanel .olControlZoomToFeaturesItemInactive { 
            width:  18px;  
            height: 18px;
            background: url("../theme/default/img/arrow_in_off.png") center no-repeat;
        }