All geek questions in one place

Maps are not displayed (all pink) in Firefox using OpenLayers and a native OSM server

I installed my own OSM server to provide card tiles for use in the application. For an application, I use OpenLayers and came up with a strange problem when porting code from slippymap to my application. I mostly use the same code, and for local fragments I set up the URL of my tile server.

The problem is that when I switch to the local level, I see only the pink layer of the map, but the src attribute of the image tag loads the actual fragment. I tried with Firebug to remove the pink layer, but there is no image behind it! Copying the URL from the src attribute of the img tag opens the fragment as an image.

I tried this for Chrome, and the local level works in IE 7,8,9. The problem is only in FF, and I suspect something with OpenLayers, but I don't know what. The Mapnik layer works and displays tiles in all browsers. Using HTML5, by the way.

Any ideas or hints are welcome.

+6
source share
2 answers

Another solution that does not require adding CORS headers to the server. You need to provide the "tileOptions" option to configure the layer, for example:

var layer = new OpenLayers.Layer.OSM("layer name", [urls], { "tileOptions": { "crossOriginKeyword": null } });

OpenLayers docs for Layer.OSM and Tile.Image tell me how to do this, but there is no mention that by default there may be problems in Firefox.

+11
source

Hm, I almost guess this is right. This was an Apache header parameter that allows you to query the cross-domain for the provided resources. Here is more details for the curious https://developer.mozilla.org/en/http_access_control

This is the header parameter. Include it in the <Directory>, <Location> or .htaccess file and make sure you have mod_headers installed.

 Header set Access-Control-Allow-Origin *
+4
source

Source: https://habr.com/ru/post/919833/

More articles:


All Articles