OpenLayers 3 and XYZ Layer

Question

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): OpenSeaMap Screen with OpenLayers2

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.

DonMarco · Accepted Answer · 2013-11-29 07:45:19Z

3

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)

answered Nov 29, 2013 at 7:45

DonMarco

4153 gold badges14 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dr. Windows · Accepted Answer · 2017-01-17 15:08:44Z

3

To me, the problem is solved by removing the quotes of null:

    new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
            crossOrigin: null
        })
    })]

answered Jan 17, 2017 at 15:08

Dr. Windows

412 bronze badges

Collectives™ on Stack Overflow

OpenLayers 3 and XYZ Layer

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related