I am trying to use ExtJS 3.x to display WMS Openlayers Layer but I am not able to keep default zoom at layer level. layer is loading but as a point (we can identify like a point but after too much of zooming, can see complete layer). I dont know where I am doing wrong. here is my code:
<html>
<head>
<title> A Basic GeoExt Page </title>
<script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
<script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="GeoExt/resources/geoext-all-debug.css"></link>
<script type="text/javascript">
var bounds = new OpenLayers.Bounds(
72.807361837,18.9096069620001,
73.1064634320001,19.299369874
);
Ext.onReady(function() {
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://localhost:8080/geoserver/gwc/service/wms",
{
layers: "postgis-iit:busroute",
//center:[19.0759837, 72.8776559],
});
map.addLayer(layer);
map.zoomToExtent(bounds);
new GeoExt.MapPanel({
renderTo: 'gxmap',
center:[19.0759837, 72.8776559],
zoom:11,
height: 600,
width: 600,
map: map,
title: 'Demo GeoExt Map from OpenLayers'
});
});
</script>
</head>
<body>
<div id="gxmap"></div>
</body>
</html>
even after explicitly specifying map.zoomToExtent(bounds), it is not giving desired result. Thank you in advance.