GeoExt Map with ScaleLine / ScaleBar and Grid with WFS
HTML
<script src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css">
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css">
<script src="http://www.openlayers.org/api/2.11/OpenLayers.js"></script>
<script src="http://api.geoext.org/1.1/script/GeoExt.js"></script>
<div>
<h2>GeoExt Map with OSM BaseLayer and WMS Overlay</h2>
Use either displayOutsideMaxExtent: true for the WMS-Layers or define a maxExtent for your Map!
<div/>
<br />
<div id="mainpanel"></div>
JavaScript
var mapPanel, mainPanel;
Ext.onReady(function () {
var map = new OpenLayers.Map({
maxExtent: new OpenLayers.Bounds(1247348.5486233, -4263307.2348958, 4260801.9513187, -2448386.4355452)
});
var osm_layer = new OpenLayers.Layer.OSM();
var wmsLayer1 = new OpenLayers.Layer.WMS(
"isr_map:marker_point",
"http://localhost:8080/geoserver/isr_map/wms?service=WMS&version=1.1.0&request=GetMap&layers=isr_map:marker_point&styles=&bbox=90,0.0,99.0,100.0&width=675&height=768&srs=EPSG:404000&format=image/png", {
layers: 'isr_map:marker_point',
transparent: true
}, {
isBaseLayer: true
//,displayOutsideMaxExtent: true
});
map.addLayers([osm_layer, wmsLayer1]);
// create map panel
mapPanel = new GeoExt.MapPanel({
title: "Map",
region: "center",
height: 400,
width: 300,
map: map,
center: new OpenLayers.LonLat(24.740278910086, -28.844323887404).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()),
zoom: 5
});
mainPanel = new Ext.Panel({
renderTo: "mainpanel",
layout: "border",
height: 400,
width: 620,
items: [mapPanel]
});
//map.setCenter(new OpenLayers.LonLat(2754075.249971,-3355846.8352205),5);
/* map.setCenter(
new OpenLayers.LonLat(24.740278910086, -28.844323887404).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
),5);
*/
});