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
Best Answer
You don't need to change the OpenLayers code. Instead, add the bounds to your map's options: