Search code examples
javascriptopenlayers

Issue in adding image to Openlayers

I am trying to implement Annotorious Openlayers example in my web page. I am able to get the map properly but no image is getting loaded in it. I have never used Openlayers before.

The default code is: 

var baseLayer = new OpenLayers.Layer.TMS("Baselayer", "map_muenster/",
  { layername: ".",
    serviceVersion: ".",
    transitionEffect: "resize",
    type:"jpg" });

which I think looks for an images in map_muenster directory, but I just want it to display one image.

After looking up a bit, I found this Stack Overflow post. I tried adding this layer in the map:

var osm = new OpenLayers.Layer.OSM();

var graphic = new OpenLayers.Layer.Image(
    'Image',
    'https://www.w3schools.com/css/paris.jpg',
    new OpenLayers.Bounds(27.418100,35.771100,28.388000,36.558500),
    new OpenLayers.Size(800,255),
    {numZoomLevels: 3}
);

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addLayers([osm, graphic]);
map.zoomToExtent(new OpenLayers.Bounds(27.418100,35.771100,28.388000,36.558500));

but instead of showing the image at https://www.w3schools.com/css/paris.jpg, the container shows a world map.

How can I add the image to my map and make it annotable?

Solution

  • Got it working by replacing this line: 

    map.addLayers([osm, graphic]);

    with this:

    map.addLayers([graphic, osm]);