Modify existing library from OpenLayers (ZoomToMaxExtent)

Question

I would like to modify ZoomToMaxExtent.js library from openlayers so as when I click the button the map will display only Great Britain and not the whole world. I am having problems creating the library. The boundaries of Great Britain is “Bounds(-16.08,49.06,6.76,58.74)” and the code from the ZoomToMaxExtent Library is the following:

  OpenLayers.Control.ZoomToMaxExtent = OpenLayers.Class(OpenLayers.Control, {
    type: OpenLayers.Control.TYPE_BUTTON,
    trigger: function() {
        if (this.map) {
            this.map.zoomToMaxExtent();
        }   
    },
    CLASS_NAME: "OpenLayers.Control.ZoomToMaxExtent"
});

I know that I need to change the coding within the trigger function. Can actually someone indicate how I can do that? Preferably i would like to create a new library based on this code instead of modifying the existing one.

Thanks

---

var map, drawControls, selectControl, selectedFeature, select, hover, control;

        function init() {

            //set up projections
            // World Geodetic System 1984 projection
            var WGS84 = new OpenLayers.Projection("EPSG:4326");

            // WGS84 Google Mercator projection
            var WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");

            // OS British National Grid
            var os = new OpenLayers.Projection("EPSG:27700");

            //Initialize the map
            //Creates a new openlayers map in the <div> html element id map
            var options = {
                controls:[
                //allows the user pan ability
                new OpenLayers.Control.Navigation(),
                //displays the pan/zoom tools
                new OpenLayers.Control.PanZoom(),
                //new OpenLayers.Control.PanZoomBar(),
                //displays a layer switcher
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.OverviewMap(),
                //Displays the scale
                new OpenLayers.Control.ScaleLine(),
                new OpenLayers.Control.Scale($('scale')),
                new OpenLayers.Control.Permalink(),
                //displays the mouse position's coordinates in a <div> html element with
                new OpenLayers.Control.MousePosition({
                    div:document.getElementById("coordinates")
                })
                ],

                maxExtent: new OpenLayers.Bounds(-16.08,49.06,6.76,58.74),
                maxResolution: 0.00138671875,
                projection: "EPSG:4326",
                units: "degrees"

            };
            map = new OpenLayers.Map( 'map', options );

            // base map layers
            var openstreetmap = new OpenLayers.Layer.OSM();
            var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
                key: 'BC9A493B41014CAABB98F0471D759707'
            }
            );
            var google_maps = new OpenLayers.Layer.Google("Google Maps", {
                numZoomLevels: 20
            }
            );
            var google_satellite = new OpenLayers.Layer.Google("Google Satellite", {
                type: google.maps.MapTypeId.SATELLITE,
                'sphericalMercator': true,
                numZoomLevels: 20
            }
            );
            var bing_shaded = new OpenLayers.Layer.VirtualEarth("Bing Maps", {
                type: VEMapStyle.Shaded,
                'sphericalMercator': true
            }
            );
            var bing_hybrid = new OpenLayers.Layer.VirtualEarth("Bing Satellite", {
                type: VEMapStyle.Hybrid,
                'sphericalMercator': true,
                numZoomLevels: 20
            }
            );
            var bing_aerial = new OpenLayers.Layer.VirtualEarth("Bing Aerial", {
                type: VEMapStyle.Aerial,
                'sphericalMercator': true,
                numZoomLevels: 20
            }
            );

            // WMS Layers for the projection of the shapefiles
            var national_parks = new OpenLayers.Layer.WMS(
            "National Parks", "http://localhost:8080/geoserver/wms", {
                srs: 'EPSG:4326',
                layers: 'National_Parks',
                transparent: 'true',
                format: 'image/png',
                buffer:0
            }, {
                'wrapDateLine': false,
                'displayOutsideMaxExtent':true
            }
            );

            map.addLayers([
            openstreetmap, cloudmade, google_maps, google_satellite,bing_shaded, bing_hybrid, bing_aerial, // Display the base maps
            national_parks // Display the wms layers
            ]);

            select = new OpenLayers.Layer.Vector("Selection", {
                styleMap:
                new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
            });
            hover = new OpenLayers.Layer.Vector("Hover");
            map.addLayers([hover, select]);

            var     controla = new OpenLayers.Control.GetFeature({
                protocol: OpenLayers.Protocol.WFS.fromWMSLayer(national_parks, {
                    featureType:"National_Parks",
                    featurePrefix:"protec_are"
                }),
                box: true,
                hover: true,
                multipleKey: "shiftKey",
                toggleKey: "ctrlKey"
            });
            controla.events.register("featureselected", map, function(e) {
                select.addFeatures([e.feature]);
            });
            controla.events.register("featureunselected", map, function(e) {
                select.removeFeatures([e.feature]);
            });
            controla.events.register("hoverfeature", map, function(e) {
                hover.addFeatures([e.feature]);
            });
            controla.events.register("outfeature", map, function(e) {
                hover.removeFeatures([e.feature]);
            });
            map.addControl(controla);
            controla.activate();

            // map extent
                    var mapextent = new OpenLayers.Bounds(-16.08,49.06,6.76,58.74).transform(WGS84, map.getProjectionObject());
                    map.zoomToExtent(mapextent);
            //map.zoomToMaxExtent()

            // 33333 Customizing the panel control buttons
            dragmouse = new OpenLayers.Control.DragPan({
                title:"Pans the map with a drag of the mouse"
            });
            var panel = new OpenLayers.Control.Panel({
                defaultControl: dragmouse
            });
            panel.addControls([
            new OpenLayers.Control.ZoomBox({
                title:"Zoom box: Selecting it you can zoom on an area by clicking and dragging."
            }),
            dragmouse,
            new OpenLayers.Control.ZoomToMaxExtent({
                title:"Zoom to the max extent"

            })
            ]);

            nav = new OpenLayers.Control.NavigationHistory();
            // parent control must be added to the map
            map.addControl(nav);
            panel.addControls([nav.next, nav.previous]);

            map.addControl(panel);

            // 33333 End

        } // End of the init function

Answer 1

You don't need to change the OpenLayers code. Instead, add the bounds to your map's options:

var options = {
  maxExtent: new OpenLayers.Bounds(-16.08,49.06,6.76,58.74),
  maxResolution: 0.00138671875,
  projection: "EPSG:4326",
  units: "degrees"
};
map = new OpenLayers.Map("map", options);

Answer 2

The OpenLayers.Map initialization takes a parameter called 'restrictedExtent'. This restricts the map to a given extent, including the "zoom to world" button of the PanZoom widget. So, add the following line to your options:

restrictedExtent: new OpenLayers.Bounds(-16.08,49.06,6.76,58.74),

Answer 3

I guess he is not willing to restrict the extent but have a special zoomToStartupPlace/zoomToMyPersonalMaxExtent.

Since you creating a new button( Control ) just create a handler to point map to your desired extent, by overring default OpenLayers behavior:

var greatBritainMaxExtent = new OpenLayers.Control.ZoomToMaxExtent(
  {
    trigger: function()
    {
        if ( !this.map ) return;
        this.map.zoomToExtent( new OpenLayersBounds( -16.08,49.06,6.76,58.74 ) );
    }
  }
);
map.addControl( greatBritainMaxExtent );

Answer 4

If you want to move to your original position and zoom :

var initExtent = new OpenLayers.Bounds(-16.08,49.06,6.76,58.74);
var initZoomLevel = 2;

var zoomToME = new OpenLayers.Control.ZoomToMaxExtent({title:"Go to original position",
trigger: function()
  {
    map.moveTo(initExtent.getCenterLonLat(),initZoomLevel)
  }
});