Could you try with this minimal code and see if it works?
mappanel-div.html:
<html>
<head>
<title>GeoExt MapPanel Example</title>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css" />
<script src="http://www.openlayers.org/api/2.13/OpenLayers.js"></script>
<script type="text/javascript" src="./script/GeoExt.js"></script>
<script type="text/javascript" src="mappanel-div.js"></script>
</head>
<body>
<h1>GeoExt.MapPanel with an Existing OpenLayers.Map</h1>
<p>This example shows the how to create a MapPanel with a map that has
already been created.<p>
<p>The js is not minified so it is readable. See <a href="mappanel-div.js">mappanel-div.js</a>.</p>
<div id="mappanel"></div>
</body>
</html>
mappanel-div.js:
var mapPanel;
Ext.onReady(function() {
var osmLayer = new OpenLayers.Layer.OSM();
var overlayLayer = new OpenLayers.Layer.WMS("Overlay",
"[http://localhost:8080/geoserver/wms](http://localhost:8080/geoserver/wms)", {
layers: "topp:states",
transparent: true,
format: "image/gif"
}, {
isBaseLayer: false,
visibility: true
}
);
var map = new OpenLayers.Map({
projection: "EPSG:3857",
layers: [osmLayer, overlayLayer]
});
mapPanel = new GeoExt.MapPanel({
title: "GeoExt MapPanel",
renderTo: "mappanel",
height: 400,
width: 600,
map: map,
center: new OpenLayers.LonLat(-87.6315625, 41.884362).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857")),
zoom: 3
});
});
You will need to adjust the path to GeoExt.js in the HTML file and the layer name in the JS file (and probably the map center coordinates). Please note I’m linking OpenLayers 2.13: I initially tried with OL 2.11 but had several issues (what version of OL are you using?).
You still didn’t tell me if you see any error in the JS console: without this info, it is very difficult to tell whether this issue is related to GeoServer or rather to OpenLayers/GeoExt (which I suspect is the case).
–S
Il giorno ven, 15/05/2015 alle 15.18 +0200, ELKHATTABI Imane ha scritto:
Thanks Stefano for replying.
The Global Imagery base map is showing even if its visibility is false. However when I check my wms layer to be displayed on top of it . I get the pink tiled image.
I’m using the projection EPSG:4326.
On the other hand , Ideleted the preview base layer and replaced it with OpenStreetMap as a base layer defined like this :
this.mapPanel=new GeoExt.MapPanel({
layout:“anchor”,border:true,region:“center”,
map:this.map,
center:mapConfig.center&&new OpenLayers.LonLat(mapConfig.center[0],mapConfig.center[1]),
zoom:mapConfig.zoom,
items:[{
xtype:“gx_zoomslider”,
vertical:true,height:100,
plugins:new GeoExt.ZoomSliderTip({template:“
Zoom Level: {zoom}
”})},
this.createMapOverlay()
],
layers: [
//====base layer=====
new OpenLayers.Layer.OSM(“OpenLayers”),
//=====overlays=====
new OpenLayers.Layer.WMS(“dim_bts_geo”,
“http://localhost:8080/geoserver/wms”, {
layers: “dw1:dim_bts_geo”,
transparent: true,
format: “image/gif”
}, {
isBaseLayer: false,
buffer: 0,
visibility: false
}
)
]
});
However, No map Component is showing. The page is just empty .
ᐧ
