openlayers/examples/navtoolbar-alwaysZoom.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2         <head>
   3                 <title>A navToolbar with an alwaysZoom ZoomBox</title>
   4                 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5             <link rel="stylesheet" href="style.css" type="text/css" />
   6                 <!-- Override the position of the toolbar to make it fit in a small map -->
   7                 <style type='text/css'>
   8                         .olControlNavToolbar div {
   9                           top: 150px;
  10                         }
  11         </style>
  12                 <script src="../lib/OpenLayers.js"></script>
  13                 <script type="text/javascript">
  14                         function init() {
  15
  16                                 //Creation of a custom panel with a ZoomBox control with the alwaysZoom option sets to true
  17                                 OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel, {
  18
  19                                     /**
  20                                      * Constructor: OpenLayers.Control.NavToolbar
  21                                      * Add our two mousedefaults controls.
  22                                      *
  23                                      * Parameters:
  24                                      * options - {Object} An optional object whose properties will be used
  25                                      *     to extend the control.
  26                                      */
  27
  28
  29                                     initialize: function(options) {
  30                                         OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
  31                                         this.addControls([
  32                                           new OpenLayers.Control.Navigation(),
  33                                                   //Here it come
  34                                           new OpenLayers.Control.ZoomBox({alwaysZoom:true})
  35                                         ]);
  36                                                 // To make the custom navtoolbar use the regular navtoolbar style
  37                                                 this.displayClass = 'olControlNavToolbar'
  38                                     },
  39
  40
  41
  42                                     /**
  43                                      * Method: draw
  44                                      * calls the default draw, and then activates mouse defaults.
  45                                      */
  46                                     draw: function() {
  47                                         var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
  48                                         this.activateControl(this.controls[0]);
  49                                         return div;
  50                                     },
  51                                 });
  52
  53                                 var map;
  54
  55                                 map = new OpenLayers.Map('map');
  56
  57                     var wms = new OpenLayers.Layer.WMS(
  58                         "OpenLayers WMS",
  59                         "http://labs.metacarta.com/wms/vmap0",
  60                         {layers: 'basic'}
  61                     );
  62
  63                                 map.addLayers([wms]);
  64                                 map.zoomToMaxExtent();
  65
  66                                 var panel = new OpenLayers.Control.CustomNavToolbar();
  67                     map.addControl(panel);
  68                                 }
  69                 </script>
  70         </head>
  71         <body onload="init()">
  72                 <h1 id="title">A navToolbar with an alwaysZoom ZoomBox</h1>
  73                 <p id="shortdesc">
  74                 Demo of a custom NavToolbar which uses a zoomBox tool that always zoom in even when the zoom box is too big.
  75         </p>
  76                 <div id="map" class="smallmap">  </div>
  77         </body>
  78 </html>