[OpenLayers-Users] OpenLayers.Layer.WMS visualization

Wed Sep 12 03:15:35 PDT 2012

Hello,

I've included to my HTML OpenLayers page a WMS Layer with Google maps API
as a Base Layer. The former is only visible when the map is zoomed to its
max extent. Why is happening that? I've posted the code below.

Thank you very much.

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
 <title>NoGAP archaeological project</title>
<script type='text/javascript' src='OpenLayers.js'></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=true"></script>
<style type="text/css">
#tituloPagina {
font-family: Verdana, calibri;
font-size: 1.2em;
font-weight: normal;
color: #FF000000;
}
body {
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: small;
        }
#map_element {
            clear: both;
            position: relative;
            width: 1000px;
            height: 491px;

            }
 #wrapper {
                width: 512px;
            }

            #location {
                float:left ;
            }

            #options {
                position: absolute;
                left: 13px;
                top: 7px;
                z-index: 3000;
            }
 /* Styles used by the default GetFeatureInfo output, added to make IE
happy */
            table.featureInfo, table.featureInfo td, table.featureInfo th {
                border: 1px solid #ddd;
                border-collapse: collapse;
                margin: 0;
                padding: 0;
                font-size: 90%;
                padding: .2em .1em;
            }

            table.featureInfo th {
                padding: .2em .2em;
                text-transform: uppercase;
                font-weight: bold;
                background: #eee;
            }

            table.featureInfo td {
                background: #fff;
            }

            table.featureInfo tr.odd td {
                background: #eee;
            }

            table.featureInfo caption {
                text-align: left;
                font-size: 100%;
                font-weight: bold;
                text-transform: uppercase;
                padding: .2em .2em;
            }
</style>
 <script type='text/javascript'>

var map;
 function init() {
 var bounds = new OpenLayers.Bounds(
14000, 305900,
277000, 610500
);
 var options = {
                controls: [],
maxExtent: bounds,
                maxResolution: 421.69235913287775,
                projection: "EPSG:4326",
                units: 'm'
            };
 map = new OpenLayers.Map('map_element', {});
map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.Scale($('scale')));

map.addControl (new OpenLayers.Control.Attribution());
 map.addControl(new OpenLayers.Control.MousePosition({element:
$('location')}));

gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
// used to be {type: G_PHYSICAL_MAP}
);
gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
// default type, no change needed here
);
ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
// used to be {type: G_HYBRID_MAP, numZoomLevels: 20}
);
gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
// used to be {type: G_SATELLITE_MAP, numZoomLevels: 22}
);
 nogap = new OpenLayers.Layer.WMS(
'NoGAP Settlements',
'http://localhost:8080/geoserver/NoGAP_webgis/wms',
   {
                        layers:"NoGAP_webgis:NoGAP_Sites_oct2011",
                        transparent: true,

                    },{
                        isBaseLayer: false,
                        controls: [],
                        maxExtent: bounds,

                        projection: "EPSG:4326",
                        units: 'm'
                    }
);

     map.addLayers([nogap, gphy, gmap, gsat, ghyb]);
 if(!map.getCenter()){
map.zoomToMaxExtent();
 map.setCenter(new OpenLayers.LonLat( 71,23 ).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
    ), 7);
    // add behavior to html
    var animate = document.getElementById("animate");
    animate.onclick = function() {
        for (var i=map.layers.length-1; i>=0; --i) {
            map.layers[i].animationEnabled = this.checked;
        }
    };
}
 }
</script>
</head>

<body onload='init();'>
<p id="tituloPagina">NoGAP archaeological survey</p>
<div id='map_element' style='width: 1000px; height: 500px;'>
</div>
</body>
</html>

-- 
José Luis Mateos González
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20120912/65330801/attachment-0001.html>