Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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) {
    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.


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 = {
                //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({

                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',
            }, {
                'wrapDateLine': false,

            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", {
                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, {
                box: true,
                hover: true,
                multipleKey: "shiftKey",
                toggleKey: "ctrlKey"
            controla.events.register("featureselected", map, function(e) {
            controla.events.register("featureunselected", map, function(e) {
            controla.events.register("hoverfeature", map, function(e) {
            controla.events.register("outfeature", map, function(e) {

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

            // 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
            new OpenLayers.Control.ZoomBox({
                title:"Zoom box: Selecting it you can zoom on an area by clicking and dragging."
            new OpenLayers.Control.ZoomToMaxExtent({
                title:"Zoom to the max extent"


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


            // 33333 End

        } // End of the init function
share|improve this question

3 Answers 3

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);
share|improve this answer
you need to specify the maximum extent in 900931 in that case or use the transform method of bounds. –  iant Jun 15 '11 at 14:16
@iant I have a tranform method that converts the units to "4326" --> mapextent = new OpenLayers.Bounds(-16.08,49.06,6.76,58.74).transform("EPSG:4326", map.getProjectionObject());. Then i changed the code to the following: maxExtent: mapextent, maxResolution: 0.00138671875, projection: "EPSG:4326", units: "degrees". But still no luck –  Geo Jun 15 '11 at 14:27
you need to convert the bounds from 4326 to 900913 and leave the map projection as 900913 (otherwise there is no need to convert it) –  iant Jun 15 '11 at 16:42
@iant I checked every combination but still is not working. I think it is because i have as base layers openstreetmap and googlemaps and possible i need to define some parameters for these base layers –  Geo Jun 16 '11 at 16:21
If you are using OSM or Google then your map is in 900913 so you must either express the bounds in meters or convert from lat/lon (4326) to 900913 using a transform. –  iant Jun 16 '11 at 16:46

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),
share|improve this answer

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 );
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.