OpenLayers show Bounds on zoomEnd and moveEnd
HTML
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/style.css">
<script src="https://www.aviationweather.gov/javascript/awc_openlayers.js"></script>
<h1 id="title">OpenLayers Live Measurement of Bounds</h1>
<h4>Show bounds of map after zoom and pan</h4>
<div id="bound_container">
<div id="Bounds1"></div>
<div id="Bounds2"></div>
<div id="Bounds3"></div>
<div id="Bounds4"></div>
</div>
<div id="map" class="smallmap"></div>
CSS
html,
body {
height: 100%;
width: 100%;
padding: 5px;
margin: 0px;
}
#map {
height: 80%;
width: 95%;
}
JavaScript
var map, fromProjection, toProjection;
// globals for easy debugging
//***************************************
var MakeMap = function Map(options){
eproj = new OpenLayers.Projection("EPSG:4326");
mproj = new OpenLayers.Projection("EPSG:3857");
var carta = new OpenLayers.Map('map', {
"projection": mproj,
"displayProjection": eproj
});
return carta;
}
map = new MakeMap();
addBaseLayers();
//Zoom the map
// map.zoomTo(zoom);
map.bounds = new OpenLayers.Bounds( -14990770, 2146482, -6827850, 7585402 );
bounds_update();
function bounds_update() {
$("#Bounds1").text(" -> " + map.size);
$("#Bounds2").text(" -> " + map.getExtent());
$("#Bounds3").text(" -> " + map.getExtent().transform(toProjection, fromProjection));
$("#Bounds4").text(" -> " + map.calculateBounds());
}
map.events.on({
'zoomend': function(e) {
bounds_update()
},
'moveend': function(e) {
bounds_update()
}
});
function addBaseLayers(){
var layer_info = getESRILayerInfo();
base_terrain = new OpenLayers.Layer.ArcGISCache(
"Terrain",
"http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
{
"isBaseLayer": true,
"wrapDateLine": true,
"layerInfo": layer_info,
"attribution": "Source: Esri"
}
);
map.addLayer(base_terrain);
base_road = new OpenLayers.Layer.ArcGISCache(
"Topo",
"http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
{
"isBaseLayer": true,
"wrapDateLine": true,
"layerInfo": layer_info,
"attribution": "Source: Esri"
}
);
map.addLayer(base_road);
base_sat = new OpenLayers.Layer.ArcGISCache(
"Topo",
"http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
{
"isBaseLayer": true,
"wrapDateLine": true,
"layerInfo": layer_info,
"attribution": "Source: Esri"
}
);
...