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";, {
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:"<div>Zoom Level:
> {zoom}</div>"})},
> 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 .
> ᐧ
------------------------------------------------------------------------------
One dashboard for servers and applications across Physical-Virtual-Cloud
Widest out-of-the-box monitoring support with 50+ applications
Performance metrics, stats and reports that give you Actionable Insights
Deep dive visibility with transaction tracing using APM Insight.
http://ad.doubleclick.net/ddm/clk/290420510;117567292;y
_______________________________________________
Geoserver-users mailing list
Geoserver-users@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/geoserver-users
