2

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();
  }
}
  • 1
    Relevant part of your code would be helpful. – kryger Mar 26 '14 at 15:01
  • 1
    Is the value for the Bounds correct? Does your data really stretch from -5,-5,5,5? – Devdatta Tengshe Apr 1 '14 at 5:57
  • @DevdattaTengshe no my data does not really strech from -5,-5,5,5. I simply modified these values to see the changes they made to the output. Finally I realized that my image is centered on the map center and is not coming up as a raster image on particular location on the map. – abhinavgoyal02 Apr 2 '14 at 4:06
  • 2
    @abhinavgoyal02: 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, as well as the image's Size (i.e height and width). Please see this example on the correct way to use an Image layer: openlayers.org/dev/examples/image-layer.html – Devdatta Tengshe Apr 2 '14 at 4:40
  • 1
    That was just an example. You need to enter the actual bounds (in web Mercator) of your image. You need to find out what the real bounds are, and enter those. – Devdatta Tengshe Apr 2 '14 at 6:11
7

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);
  • example link is not working – isuruAb Mar 14 '17 at 4:47

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.