views:

1356

answers:

1

I am using an image to display my map with OpenLayers. My JS code looks like this:

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 is:

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

But I can't get OpenLayers to scale down the large image. It is always display at full resolution and I can't zoom out to display the whole globe. Help please.

+4  A: 

You need to set the size of the image as it should display when fully zoomed out.

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 changed the size to one fourth of the size of the original. You could make this smaller if you wanted it even more zoomed out.

Jon Snyder
Thanks so much Jon, I can't believe I didn't try setting the Size to a smaller value =) Worked great!
Bernie Perez