Openlayers OSM Cross-Origin Issue

Question

I'm developing a web map for my town. I made my own vector layers and, to avoid the too much "white", I decided to use as base layer OSM. The problem is that when I use the array of resolutions to set the zoom (in the other ways I'm not able to set the zoom) I get the cross-origin error. Here is the code of the osm layer I made:

var osm = new OpenLayers.Layer.OSM(
             'OSM',
             null,
             { zoomOffset: 4, resolutions: [4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135], tileOptions: { crossOriginKeyword: null }}
             );
         map.addLayer(osm);

With this, by setting the origin keyword on "null", I don't get the cross-origin problem, but it doesn't load the tiles (error 404). If I remove the resolutions array, the tiles are loaded correctly, but then the zoom is not controlled and user is free to zoom to the whole planet. I'm using Openlayers 2.13.1 with IIS Express and Geoserver 2.5.2. Of course, I'm already using a proxy. Any suggestions on where this problem comes from and how to fix it?

score 1 · Accepted Answer · answered Dec 14 '14 at 13:20

Ok, problem solved. Like I said early, the problem was in the resolutions, or better, in the zoom. If you use a max resolution or an array of resolutions(along with restricted extent), OpenLayers will ask to the server for the first set of tiles, which is not what I wanted.

To fix the problem, you must tell the server that you want to start from the set of tiles corresponding to your maxResolution property, or the first resolution in your resolutions array. To do so, you use the the zoomOffset property, like so:

var osm = new OpenLayers.Layer.OSM(
            'OSM',
            null,
            {
                resolutions: [4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.29858214169740677],
                zoomOffset: 15
            });
        map.addLayer(osm);

This way, it will work (you must use a proxy file though, otherwise the cross-origin error will appear anyway).

Thanks to Ravi Mehta to have answered to my question.

score 0 · Answer 2 · answered Dec 12 '14 at 21:20

0

If I understand the problem correctly, there are two ways to solve the problem.

1) First, you can configure IIS to allow CORS. Here's a link on how to do this. Basically, you have to add these lines to your web.config file.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

2) If you don't want to mess around with config files, you can also just run it from the root of for geoserver. On my computer (running on Ubuntu, so it might be different that from a windows computer) its at var/lib/Tomcat7/webapps.

answered Dec 12 '14 at 21:20

Ravi Mehta

605
1
7
17

What do you mean with "run it from the root of your geoserver"? You mean literally put the folder into the webapps and then run it through visual studio/iis express? I'm asking, because putting this code you gave me returns me an error 500.19. – liveAndrew Dec 12 '14 at 23:00
Sorry I was unclear. If you need to run it through IIS, than the second solution won't work. At least for me, Tomcat 7 came with geoserver at port 8080, and I ran it through localhost:8080. It's not really a permanent solution, but it is an option. – Ravi Mehta Dec 13 '14 at 00:28
I tried to add the app to that folder of Geoserver, but it doesn't seem to work, it shows me error 404.I don't understand what's the problem, if it is Geoserver, IIS Express or OSM itself. – liveAndrew Dec 13 '14 at 08:35

Openlayers OSM Cross-Origin Issue

2 Answers2