1

I can not override my WMS layer in Google Maps as a base: I have a WMS layer in Geoserver am using Openlayers to show them.

Calling only works WMS layer:

Wms layer

Here is my code, I am using using the bounds used in Geoserver bounds because they use the standard EPSG 900913 does not work:

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='utf-8' />
 <title>My OpenLayers Map</title>
 <script type='text/javascript' src='OpenLayers.js'></script>
 <script type='text/javascript'>

 var map;

 function init() { 

var bounds = new OpenLayers.Bounds(
     -51.2809205216329, -30.2445876337061,
                -51.0207995216329, -29.9661286337061
    );

var options = {
    controls :[new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoom()],

    maxExtent : bounds,
    maxResolutin:0.00108773046875,
    projection: "EPSG:900913",
    units: 'm'
};

map = new OpenLayers.Map('map_element', options);    



var wms = new OpenLayers.Layer.WMS(
            "Linhas de ônibus",
            "http://localhost:8080/geoserver/wms?",
            {
               layers: 'Teste:onibus',                                
               isBaseLayer: false,
               styles : '', 
               format :"image/jpeg"
            }            
        );

    map.addLayers([wms]);

    var point = new OpenLayers.LonLat(-51.22,-30.08); 
    point.transform(new OpenLayers.Projection("EPSG:4326"), 
    map.getProjectionObject()); 
    map.setCenter(point, 3); 

    map.addControl(new OpenLayers.Control.LayerSwitcher({}));

 if(!map.getCenter()){
    map.zoomToMaxExtent();
 }
}

 </script>
</head>

<body onload='init();'> <!-- Chama a função js init() --> 

<!--Elemento HTML onde o mapa é exibido -->
 <div id='map_element' style='width: 800px; height: 800px;'>
 </div>

</body>
</html>

The problem is when I try to show the WMS layer on Google Maps API, even though the two baselayers do overlay, whenever I click one layer the other disappears.

Google streets layer

enter image description here

WMS layer blank

enter image description here

My code:

      <!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='utf-8' />
 <title>My OpenLayers Map</title>
 <script type='text/javascript' src='OpenLayers.js'></script>

 <script src="http://maps.google.com/maps/api/js?sensor=false&v=3.2"></script>

 <script type='text/javascript'>


 var map;
  //Bounds: providos do Geoserver
 var bounds = new OpenLayers.Bounds(
         -51.2809205216329, -30.2445876337061,
                    -51.0207995216329, -29.9661286337061
        );

 var options = {
        controls :[new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoom()],
        maxExtent : bounds,
        maxResolutin:0.00108773046875,
        projection: 'EPSG:900913',
        units: 'm'
    };

 function init() {

  map = new OpenLayers.Map('map_element',options);


 var google_streets = new OpenLayers.Layer.Google(
    "Ruas",
    {numZoomLevels: 20}
    );

  var wms = new OpenLayers.Layer.WMS(
                "Linhas de ônibus",
                "http://localhost:8080/geoserver/wms?",
                {
                   layers: 'Teste:onibus',                                
                   isBaseLayer: false,
                   styles : '', 
                   format :"image/png",
                   transparent: true
                }            
            );

//Adiciona as camadas ao mapa
map.addLayers([google_streets, wms]);


var point = new OpenLayers.LonLat(-51.22,-30.08); 
point.transform(new OpenLayers.Projection("EPSG:4326"), 
    map.getProjectionObject()); 
map.setCenter(point, 10); 
 //Camada de controle que vai mostrar as camadas no mapa
 map.addControl(new OpenLayers.Control.LayerSwitcher({}));

 //Verifica se o mapa tem um ponto central e o extende a sua extensão máxima
 if(!map.getCenter()){
 map.zoomToMaxExtent();

 }
 }

 </script>
</head>

<body onload='init();'> <!-- Chama a função js init() --> 

<!--Elemento HTML onde o mapa é exibido -->
 <div id='map_element' style='width: 800px; height: 800px;'>
 </div>

</body>
</html>
  • 1
    I'm not sure what you want to achieve. Do you want to show your data on top of Google maps? if so then your WMS service should have a transparent: true parameter as well as the image should be requested in PNG instead of JPEG – Devdatta Tengshe Apr 2 '14 at 7:44
  • I placed the property transparent: true and png format. Now it's google maps as base and bus lines as overlay. But the layer of bus lines will not appear on the map. I edited my code in question – csf Apr 2 '14 at 13:32
1

I don't think this is the cause of your problem, but you are misspelling maxResolution in your code.

It might help you to use a tool like Fiddler or FireBug to look at the request urls of the WMS layer. For a start, check that the coordinates getting passed are in the correct projection.

  • I think you should remove the ? character in your WMS layer url too. – drunkenwagoner Apr 7 '14 at 23:57
  • I edited the code in the question and fix the maxResolution removed the character? Call WMS. Yet was the same. Open in Firefox / Firebug to see which variables were passed and correct. When I call the only WMS layer using the same code and it works. This layer is a shape my lines I have in PostGIS that can influence? – csf Apr 8 '14 at 11:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.