1

I am using OpenLayers with OpenStreetMaps to develop a small GIS-application. The image overlay doesn't seem to be working when isBaseLayer is set to false, here is my code:

  map = new OpenLayers.Map('map',{
                    eventListeners: {
                        "moveend": mapEvent,
                        "zoomend": mapEvent
                    }
                });
  OpenLayers.Layer.OSM.Toolserver = OpenLayers.Class(OpenLayers.Layer.OSM, {
      initialize: function(name, options) {
          var url = [
              "http://a.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
              "http://b.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
              "http://c.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
              "http://d.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
              "http://e.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
              "http://f.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png"
          ];
          options = OpenLayers.Util.extend({numZoomLevels: 19}, options);
          OpenLayers.Layer.OSM.prototype.initialize.apply(this, [name, url, options]);
      },
      CLASS_NAME: "OpenLayers.Layer.OSM.Toolserver"
  });
  l1=new OpenLayers.Layer.OSM.Toolserver('osm-labels-de', {isBaseLayer: false, visibility: true});
  l2=new OpenLayers.Layer.OSM.Toolserver('osm-no-labels', {isBaseLayer: true, visibility: true});
  var pic = new OpenLayers.Layer.Image(
    'shot',
    'shot.jpg',
    new OpenLayers.Bounds(13.409460,52.5207532,13.469466,52.5407532),    new OpenLayers.Size(100, 100),
    {alwaysInRange:true,isBaseLayer: false,transparent: true, visibility: true,numZoomLevels : 3 }
  );
  map.addLayers([pic,l1,l2]);
  map.setCenter(new OpenLayers.LonLat(13.409460,52.5207532).transform(
          new OpenLayers.Projection("EPSG:4326"),
          map.getProjectionObject()
          ),10);

The Layer "pic" should appear between layers "l1" and "l2" (When replacing pic with a KML-Layer, it works just fine) - BUT it appears nowhere - i am not sure, whether it is a coordinate problem or something else.

The problem could be simplified to just one base-layer "l2" and overlaying "pic" above it - i can't accomplish this either.

I saw the example at http://openlayers.org/dev/examples/image-layer.html but there, the image is the baselayer - when i set isBaseLayer to false, the image disappears. I don't really mind setting the image to be the baselayer but if i do, ONLY the image is visible, no maps anymore.

Thanks in advance for any suggestions!

1 Answer 1

2

I am pretty sure the problem is the lack of transformation of the bounds of the 'pic' layer. In your code you use the transform method to set the map centre. In the exact way you must use it for the 'pic' layer's bounds.

Please check out the code I use to set an image layer on a map:

    // World Geodetic System 1984 projection (lon/lat)
    var projWGS84 = new OpenLayers.Projection("EPSG:4326");

    var options = {   
        opacity: 1.0, 
        isBaseLayer: false,
        numZoomLevels: 20 
    };

    var extent = new OpenLayers.Bounds(WEST,SOUTH,EAST,NORTH)
        .transform(projWGS84, map.getProjectionObject());

    var imageLayer = new OpenLayers.Layer.Image('Image Layer',  
        'http://i.i.com.com/cnwk.1d/i/tim/2012/04/19/20120419_Java_Duke_mascot_001_610x418.jpg', 
        extent,
        new OpenLayers.Size(1,1),
        options);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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