Raster overlay in OpenLayers

I am using OpenLayers and recently started to learn it from the 'OpenLayers CookBook'.

I have been able to get Google Maps and WMS layers as base layers and even a vector layer overlayed correctly on top of the base layers at the exact location. Lastly, I wanted to display my Interpolation Raster image which I generated in QGIS to be displayed over the vector layer at the precise location.

But the 'Interpolation Raster' seems to load as an image and does not come up at the correct location, the way my vector layer does without any trouble. Can anyone point me in the right direction ?.

I have been searching two books on layers and on Google for the solution to this problem but it seems to be not talked about much. The code for my web page using OpenLayers is as below:

var map;
function init() {
  // Initiating 'map' Variable and Adding Controls
  map = new OpenLayers.Map('map_element', {
    controls: [
      new OpenLayers.Control.Navigation(),
      new OpenLayers.Control.PanZoomBar(),
      new OpenLayers.Control.ZoomBox(),
      new OpenLayers.Control.ZoomToMaxExtent(),
      new OpenLayers.Control.LayerSwitcher({}),

      new OpenLayers.Control.MousePosition({
        prefix: 'Long: ',
        separator: ' | Lat: '
      }),
      new OpenLayers.Control.ScaleLine({}),
      new OpenLayers.Control.OverviewMap()
    ]
  });

  // BaseMap Layers

  var wms = new OpenLayers.Layer.WMS(
    'OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {
      layers: 'basic'
    }, {
      projection: 'EPSG:4269',
      maxExtent: new OpenLayers.Bounds(-180, -90,
        180, 90),
      maxResolution: 1.40625,
      units: 'm'
    }

  );
  var google_hybrid = new OpenLayers.Layer.Google(
    "Google Hybrid", {
      type: google.maps.MapTypeId.HYBRID
    }
  );
  var google_physical = new OpenLayers.Layer.Google(
    "Google Physical", {
      type: google.maps.MapTypeId.TERRAIN
    }

  );
  var google_satellite = new OpenLayers.Layer.Google(
    "Google Satellite", {
      type: google.maps.MapTypeId.SATELLITE
    }
  );
  var google_streets = new OpenLayers.Layer.Google(
    'Google Streets', {
      type: google.maps.MapTypeId.ROADMAP,
      projection: new OpenLayers.Projection("EPSG:3857"),

      units: "dd",
      maxResolution: 1.40625,
      displayProjection: new OpenLayers.Projection("EPSG:4326")
    }, {
      "sphericalMercator": true
    }
  );
  // Vector Layers
  var vector_layer = new OpenLayers.Layer.Vector('Basic Vector Layer')
  // Load Vector Data

  var vector_KML = new OpenLayers.Layer.Vector("KML", {
    //projection: 'EPSG: 4269',
    protocol: new OpenLayers.Protocol.HTTP({
      url: 'New_Sector_Polygon_KML.kml',
      format: new OpenLayers.Format.KML({
        extractStyles: true,
        extractAttributes: true,
        maxDepth: 2
      })
    }),

    strategies: [new OpenLayers.Strategy.Fixed()]
  });

  var vector_KML_new = new OpenLayers.Layer.Vector(
    "New KML", {
      //projection: 'EPSG: 4269',
      protocol: new OpenLayers.Protocol.HTTP({
        url: 'New_Sector_Polygon_KML_new.kml',
        format: new OpenLayers.Format.KML({
          extractStyles: true,

          extractAttributes: true,
          maxDepth: 2
        })
      }),
      strategies: [new OpenLayers.Strategy.Fixed()]
    }
  )

  // Loading Image Layer---Interpolation
  var image_layer = new OpenLayers.Layer.Image(

    "IDW_Interpolation_RASTER",
    'Export_CLIP_RENDERED_Image.png',
    new OpenLayers.Bounds(-5, -5, 5, 5), {
      numZoomLevels: 7,
      maxResolution: .625
    }, {
      isBaseLayer: false
    }
  );


  // Adding map Controls
  map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));

  // Adding BaseMap and Vector Layers
  map.addLayers([
    wms,
    vector_layer, vector_KML, vector_KML_new, image_layer
  ]);
  var map_control_panel = new OpenLayers.Control.Panel({
    div: document.getElementById('panel_div'),

    defaultControl: new OpenLayers.Control.Navigation()
  });

  map.setCenter(new OpenLayers.LonLat(0, 0), 2);




  // Create some empty vector layers
  var pointLayer = new

  OpenLayers.Layer.Vector("Points");
  var lineLayer = new OpenLayers.Layer.Vector("Lines");
  var polygonLayer = new
  OpenLayers.Layer.Vector("Polygon");
  // Add layers to the map
  map.addLayers([polygonLayer, lineLayer, pointLayer]);


  // Fill layers
  initializePointLayer();

  initializeLineLayer();
  initializePolygonLayer();
  // Create some random points.
  function initializePointLayer() {
    var pointFeatures = [];
    for (var i = 0; i < 50; i++) {
      var px = Math.random() * 360 - 180;
      var py = Math.random() * 180 - 90;
      var pointGeometry = new
      OpenLayers.Geometry.Point(px, py);

      var pointFeature = new
      OpenLayers.Feature.Vector(pointGeometry);
      pointFeatures.push(pointFeature);
    }
    pointLayer.addFeatures(pointFeatures);
  }


  // Create some random lines
  function initializeLineLayer() {

    for (var j = 0; j < 1; j++) {
      var pointGeometries = [];
      for (var i = 0; i < 10; i++) {
        var px = Math.random() * 240 - 120;
        var py = Math.random() * 100 - 50;
        var pointGeometry = new
        OpenLayers.Geometry.Point(px, py);
        pointGeometries.push(pointGeometry);
      }
      var lineGeometry = new OpenLayers.Geometry.

      LineString(pointGeometries);
      var lineFeature = new
      OpenLayers.Feature.Vector(lineGeometry);
      lineLayer.addFeatures(lineFeature);
    }
  }



  // Create some random polygons

  function initializePolygonLayer() {
    for (var j = 0; j < 1; j++) {
      var pointGeometries = [];
      for (var i = 0; i < 5; i++) {
        var px = Math.random() * 240 - 180;
        var py = Math.random() * 100 - 90;
        var pointGeometry = new
        OpenLayers.Geometry.Point(px, py);
        pointGeometries.push(pointGeometry);
      }

      var linearGeometry = new OpenLayers.Geometry.
      LinearRing(pointGeometries);
      var polygonGeometry = new OpenLayers.
      Geometry.Polygon([linearGeometry]);
      var polygonFeature = new OpenLayers.
      Feature.Vector(polygonGeometry);
      polygonLayer.addFeatures(polygonFeature);
    }
  }




  //Trying to Create a circle >>>>>---------------------------------------->>>>>

  // CIRCLE
  var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
    new OpenLayers.Geometry.Point(30, 53),
    50,
    30
  );


  var attributes_c = {
    name: "my circle",
    bar: "foo"
  };

  var feature_c = new OpenLayers.Feature.Vector(circle);
  var layer_c = new OpenLayers.Layer.Vector("Circle");
  layer_c.addFeatures(feature_c);
  map.addLayer(layer_c);


  // ----xxxxxxx------------------------------------------------------------------------xxxxxxxxxxxxx



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

Answer

The problem is in the way you are setting up the Image Layer. You are not providing all the required parameters.

You need to provide the correct bounds of the image. You need to find out what the real bounds are in Web Mercator, and use those as well as the image's Size (i.e height and width), while setting up the layer.

Please see this example on the correct way to use an Image layer: https://openlayers.org/en/latest/examples/reprojection-image.html

In one of my projects, I've used the following code successfully:

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


var extent = new OpenLayers.Bounds(xMin, yMin, xMax, yMax);

var imageLayer = new OpenLayers.Layer.Image('1906', 
        img_url, //URL of Image
        extent, //Extent of Image
        new OpenLayers.Size(w,h), //height & width of Image
        options);

map.addLayer(imageLayer);