[OpenLayers-Users] Open Layers - Mapnik / Yahoo / OpenLayers WMS projection problem ? - newbie question

Sat Nov 21 21:41:33 EST 2009

Hello all.

I would really appreciate help with following tests I am performing.
I have set up very basic Open Layers scenario, displaying WMS from Open Layers, Yahoo and Mapnik.

My problem is, I can change layers only from Open Layers WMS to Yahoo and back, not to Mapnik,
if I do, everything gets broken, I see "South pole" instead of central Europe and the projection is so corrupted I even can not switch back to original Layer.

It looks like some OpenStreetMap js bug, because in the following code, if I do have layers order set to 
     map.addLayers([mapnik, wms, yahoo]); 
- mapnik first, then I see mapnik map ok, but if I switch to Yahoo for example, the projection gets broken, 
but if I set order to
     map.addLayers([yahoo, wms, mapnik]); 
- then I can see yahoo layer, I can change to Open Layers WMS, but when I change to Mapnik, everything is broken again.

even more, when I try to display a data imported to postgis from osm and published by geoserver,
I can see the data aligned using only Open Layers WMS; if I use Yahoo then the projection is shifted (by 100 km for example),
and I have problems using Mapnik at all.

Am I doing something wrong ?
Thank you for any help.

--------------------------------------------------------

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>OpenLayers: Yahoo Layer</title>
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>    

    <script type="text/javascript">
        var map;

        function init(){               

          var options = {              
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher(),
                        new OpenLayers.Control.Permalink('permlink'),
                        new OpenLayers.Control.MousePosition({element: $('location')}),
                        new OpenLayers.Control.KeyboardDefaults()
                    ],
                    units: 'm',     
                    numZoomLevels: 15
          };                

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

          var yahoo = new OpenLayers.Layer.Yahoo("Yahoo");                

          var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");

          var wms = new OpenLayers.Layer.WMS(
                "OpenLayers WMS",
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'}
          );

          map.addLayers([yahoo, wms, mapnik]);
          var lonLat = new OpenLayers.LonLat(14, 50).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
          map.setCenter (lonLat, 7);
        }                 
    </script>

  </head>
  <body onload="init()">
        <div id="map" style="width:100%; height:80%"></div>   
  </body>
</html>