CODEWITHSUNDEEP
javascriptvisibilityopenlayersopenstreetmap
Fluchtpunkt
Fluchtpunkt

Reputation: 447

How to make image layer visible in openlayers

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!

Upvotes: 1

Views: 5924

Answers (1)

Boro
Boro

Reputation: 7943

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);

Upvotes: 2

Related Questions