diff --git a/examples/localized-openstreetmap.html b/examples/localized-openstreetmap.html index 4cbfa2c000..7f4d64e0e8 100644 --- a/examples/localized-openstreetmap.html +++ b/examples/localized-openstreetmap.html @@ -32,11 +32,11 @@

Localized OpenStreetMap example

-

Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.

+

Example of a localized OpenStreetMap map with a custom tile server and a custom attribution. The base layer is OpenCycleMap with an overlay from OpenSeaMap. The OpenSeaMap tile server does not support CORS headers.

See the localized-openstreetmap.js source to see how this is done.

-
localized-openstreetmap, openstreetmap
+
cors, localized-openstreetmap, openseamap, openstreetmap
diff --git a/examples/localized-openstreetmap.js b/examples/localized-openstreetmap.js index a640c42e41..11857960d9 100644 --- a/examples/localized-openstreetmap.js +++ b/examples/localized-openstreetmap.js @@ -1,31 +1,52 @@ goog.require('ol.Attribution'); goog.require('ol.Map'); -goog.require('ol.RendererHints'); +goog.require('ol.RendererHint'); goog.require('ol.View2D'); goog.require('ol.layer.Tile'); goog.require('ol.source.OSM'); +// tiles.openseamap.org does not set CORS headers, so we have to disable +// crossOrigin and we cannot use WebGL. + +var openCycleMapLayer = new ol.layer.Tile({ + source: new ol.source.OSM({ + attributions: [ + new ol.Attribution({ + html: 'All maps © ' + + 'OpenCycleMap' + }), + ol.source.OSM.DATA_ATTRIBUTION + ], + url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png' + }) +}); + +var openSeaMapLayer = new ol.layer.Tile({ + source: new ol.source.OSM({ + attributions: [ + new ol.Attribution({ + html: 'All maps © ' + + 'OpenSeaMap' + }), + ol.source.OSM.DATA_ATTRIBUTION + ], + crossOrigin: null, + url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png' + }) +}); + + var map = new ol.Map({ layers: [ - new ol.layer.Tile({ - source: new ol.source.OSM({ - attributions: [ - new ol.Attribution({ - html: 'All maps © ' + - 'OpenCycleMap' - }), - ol.source.OSM.DATA_ATTRIBUTION - ], - url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png' - }) - }) + openCycleMapLayer, + openSeaMapLayer ], - renderers: ol.RendererHints.createFromQueryData(), + renderer: ol.RendererHint.CANVAS, target: 'map', view: new ol.View2D({ maxZoom: 18, - center: [-172857, 5977746], - zoom: 12 + center: [-244780.24508882355, 5986452.183179816], + zoom: 15 }) }); diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 72b96d01cd..c6eec5c892 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -666,6 +666,8 @@ /** * @typedef {Object} olx.source.OSMOptions * @property {Array.|undefined} attributions Attributions. + * @property {null|string|undefined} crossOrigin crossOrigin setting for image + * requests. Default is `anonymous`. * @property {number|undefined} maxZoom Max zoom. * @property {ol.TileLoadFunctionType|undefined} tileLoadFunction Optional * function to load a tile given a URL. diff --git a/src/ol/source/osmsource.js b/src/ol/source/osmsource.js index 63d57086d9..84175b5666 100644 --- a/src/ol/source/osmsource.js +++ b/src/ol/source/osmsource.js @@ -22,12 +22,15 @@ ol.source.OSM = function(opt_options) { attributions = ol.source.OSM.ATTRIBUTIONS; } + var crossOrigin = goog.isDef(options.crossOrigin) ? + options.crossOrigin : 'anonymous'; + var url = goog.isDef(options.url) ? options.url : 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'; goog.base(this, { attributions: attributions, - crossOrigin: 'anonymous', + crossOrigin: crossOrigin, opaque: true, maxZoom: options.maxZoom, tileLoadFunction: options.tileLoadFunction,