I am currently having a problem with my image on OSM via OpenLayers. I can present my Image on the right spot (nearly exactly there where i want it).
The problem is, while zooming in or out, the image changes it's location, and how it should look like. On the zoomlevel I'm setting, the image looks like it has to.

Here is the code which i am using, to show my image on the right location:

var layers = [
        new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'osm'})
        new ol.layer.Image({
            extent: [1447153.38031, 5780349.22026, 2003750.83428, 6446275.84102],
            source: new ol.source.ImageWMS({
                url: 'file:///C:/Users/Xhy/Desktop/linear.png',
                params: {'LAYERS': 'modis,global_mosaic'}

With the extent i bound my image on the coordinates I need. I had to transform my coordinates from WSG84 to Google Transverse Mercator, for that i used this site: http://cs2cs.mygeodata.eu/

The following code, is how my layers are shown on the map:

var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [1728012.45558,5982976.33295],
          zoom: 7

The center is also in Google Transverse Mercator, and i also set the zoomlevel on 7.

The output i get is nearly that what i want: When I open my example

When I zoom in it changes: Zoomed in

When i zoom in once more, the change is drastic, the image is completely somewhere else: Zommed in further

So my question is, how can i bound my image on the right location without it changing while zooming in? Do i have to set the bound different for every zoomlevel?

It took me quite some time to get the image where I wanted, now I struggle with this problem, can anyone give me any tips on how to solve this?


Try a projection: for the map, or at least for the image source.

€: To import a non-georeferenced image, you need to change the source to ol.source.ImageStatic() see http://jsfiddle.net/k7yybgLm/1/ for an example with a wms & a static overlay.

€2: Coordinates for your static image depend more or less just on the size (width/height) of your image and where you want to place it.

You define the location with imageExtent: [left, bottom, right, top] in your ol.source.ImageStatic().

I can't tell you how to get your boundaries - mine where just an example. You either set the extends where you need them, or you transform your coordinates if the image comes from some referenced source.

fyi: The boundaries need to reflect the source-proportions, i.e. if you try [1850000, 6100000, 1950000, 6150000] instead of [1850000, 6100000, 1950000, 6200000] in the fiddle, it won't squeeze the image because the src is a 500px square.

Hope that helps.

| improve this answer | |
  • What do you exactly mean with projection: ?? Do you mean to use ol.proj.get and get the paticular projection or what exactly do you mean? – Stefan Piti Feb 27 '15 at 14:46
  • jsfiddle.net/k7yybgLm/1 is an example with both - a static and a wms overlay. no problems there. so either your wms-server is setup wrong or you import a static img as wms? – ymirsson Feb 27 '15 at 18:22
  • ok, that explains a few things, will try to work on this, thanks a lot for your help – Stefan Piti Mar 1 '15 at 22:23
  • i finnally took the time and tried it out, yes it works perfectly, it's just what i was looking for, so i needed the ImageStatic.. could you add that to your answer? so you aren't downvoted – Stefan Piti Mar 3 '15 at 12:21
  • another question, from where do you have the coordinates? with what did you convert them? which site did you use? i used this: link but this isn't doing it like i want it – Stefan Piti Mar 3 '15 at 12:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.