OpenLayers 3 and XYZ Layer
cors, javascript, openlayers-3
Solution
The problem was the CORS header of tiles.openseamap.org. The solution is the following, thanks to some help on GitHub of the OpenLayers3!
The resource from `http://tiles.openseamap.org` are not cross-origin compatible. Two options: enable the cross-origin resource sharing at the server level or switch to a canvas map (see updated JSFiddle)
Problem
I have a map, which I want to display. It consists of a standard map (OSM, Google or Bing) and a layer, provided by Openseamap.org. This layers produces seamarks as images for a map. This should look like this (more or less, without the pink screen): I am trying to transfer this to OpenLayers3. The JavascriptCode I used is: ``` var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', crossOrigin: 'null' }) })], view: new ol.View2D({ center: ol.proj.transform([12.1, 54.18], 'EPSG:4326', 'EPSG:3857'), zoom: 13 }) }); ``` Which is called by the Map: ``` <div id="map" class="map"></div> ``` I have a JSFiddle to experiment with. I just can't seem to get the SeamarkLayer working, although Firebug tells me, when they don't find the seamarks as images, like in the screen with the pink square.