I am trying to overlay a jpg image over an OpenLayers map. I have been to the example on their site and looked all over for a solution with no luck. So I am guessing that their are rules for setting an openlayers.layer.image as an overlay layer. I have tried jpg, png, gif. They all work fine as a base layer with the following code:

var image_layer = new OpenLayers.Layer.Image( 'Wallpaper', 'images.png', new 
OpenLayers.Bounds(-90,-45,90,45), new OpenLayers.Size(318,159), {numZoomLevels:7,
maxResolution:.625} );

But once I include:

var image_layer = new OpenLayers.Layer.Image( 'Wallpaper', 'images.png', new 
OpenLayers.Bounds(-90,-45,90,45), new OpenLayers.Size(318,159), {numZoomLevels:7, 
maxResolution:.625, **isBaseLayer: false**} );

the layer is grey out within the layer switcher

I did figure out that if I include two different image layers - I can specify the second as an overlay. However, once I add a WMS, that overlay greys out!

What am I doing wrong - or better yet - what is OpenLayers doing wrong?

  • this is my code..... and its not displaying in openlayers....please help var graphic = new OpenLayers.Layer.Image( 'sample img', 'localhost:8080/haryana:yam2.tif', // 'localhost:8080/geoserver/wcs', //{layers:'haryana:yam2.geotiff'}, new OpenLayers.Bounds(-180, -88.759, 180, 88.759), new OpenLayers.Size(50, 28), {numZoomLevels:5} );
    – user15058
    Feb 11, 2013 at 7:25

3 Answers 3


I use the following code:

  graphic = new OpenLayers.Layer.Image(
            new  OpenLayers.Bounds(20.008697509767,32.076110839844,20.123138427735,32.154235839844),
            new OpenLayers.Size(750, 512),
            { isBaseLayer: false,
              opacity: 0.3,
              displayOutsideMaxExtent: true

and it works fine. I assume you do have a base layer of some sort in your map and that you've added it to the map before the image layer?


i have tried two image overlay and didnt get any error. you can look at this jsfiddle here...

beside this you can check out Mapstraction Image Overlay method here for getting some idea.

i.e code:

 radar_overlay = mapObject.addImageOverlay('radar', 'http://radar.weather.gov/ridge
 /Conus/RadarImg/latest_radaronly.gif', 100, -127.620375523875420, 21.652538062803, 
 -66.517937876818, 50.406626367301044);

an example with Mapstraction here..

i hope it helps you...


When you use image layer, the image is displayed only when you zoom to that extent where the image height and width can fit the bounds of the image. When that happens the check boxes will be enabled, else those will be disabled.

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.