Question

43

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

rated 0 times [ 48] [ 5] / answers: 1 / hits: 16572 / 15 Years ago, fri, may 1, 2009, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckaylab

Add To Favorites

Follow

Total Points: 311

Total Questions: 120

Total Answers: 93

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mckaylab questions

1 How to use Material UI custom variants in React with Typescript

Fri, Apr 8, 22, 00:00, 2 Years ago

1 TypeError: Cannot read properties of undefined (reading 'forEach') at Object.< anonymous> (/home/runner/myrepl/index.js:10:6

Mon, Apr 4, 22, 00:00, 2 Years ago

1 How to use the AbortController to cancel Promises in React?

Wed, Dec 1, 21, 00:00, 2 Years ago

1 How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

Mon, Apr 26, 21, 00:00, 3 Years ago

1 How to change selenium-standalone port number via webdriverio wdio file?

Wed, Jul 24, 19, 00:00, 5 Years ago

View All

answered 15 Years ago austynp · Accepted Answer

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.