Using an PNG or JPEG for Map with OpenLayers (Scale/Zoom Problem)

javascript map openlayers
Bernie Perez picture Bernie Perez · May 2, 2009 · Viewed 16k times · Source

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.

Answer

Jon Snyder picture Jon Snyder · May 2, 2009

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.

Related questions

Drawing a path with a line in OpenLayers using JavaScript

I have seen the examples presented here of how to draw a line but the examples only show how to do it with the mouse, by clicking. What I want to do is draw the line manually using JavaScript given …

Read More
LeafletJS: How to remove the zoom control

I'm trying to remove the zoom controls (+/-) on a LeafletJS map. I'm using the MapBox.js version of Leaflet but most of the operations are the same as Leaflet. I implement my map like this: var map = L.mapbox.…

Read More
Javascript: Checking if an object has no properties or if a map/associative-array is empty

Possible Duplicate: How do I test for an empty Javascript object from JSON? Is there an easy way to check if an object has no properties, in Javascript? Or in other words, an easy way to check if a map/…

Read More