Using PNG or JPEG for a map with OpenLayers (zooming / scaling issue)

Question

I am using an image to display my map using OpenLayers. My JS code is as follows:

map = new OpenLayers.Map('map'); var options = {numZoomLevels: 7, isBaseLayer: true, }; var globe = new OpenLayers.Layer.Image( 'Globe ESA', 'http://upload.wikimedia.org/wikipedia/commons/0/07/World_map_blank_black_lines_4500px.gif', new OpenLayers.Bounds(-180, -90, 180, 90), new OpenLayers.Size(4500, 2234), options); map.addLayers(globe); markers = new OpenLayers.Layer.Markers("markers"); map.addLayer(markers); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToMaxExtent(); map.addControl(new OpenLayers.Control.MousePosition()); 

My CSS:

 #map { width: 640px; height: 480px; border: 1px solid black; } 

But I can not get OpenLayers to scale a large image. It is always displayed in full resolution, and I cannot zoom out to display the entire globe. Help me please.

Answer 1

You need to set the size of the image, how it should be displayed at full reduction.

 var globe = new OpenLayers.Layer.Image( 'Globe ESA', 'http://upload.wikimedia.org/wikipedia/commonS/0/07/World_map_blank_black_lines_4500px.gif', new OpenLayers.Bounds(-180, -90, 180, 90), new OpenLayers.Size(1125,558), options); 

I resized a quarter of the size of the original. You can do it less if you want to make it even smaller.