Merge pull request #1351 from twpayne/openseamap

Add crossOrigin option to ol.source.OSM options

examples/localized-openstreetmap.html

@@ -32,11 +32,11 @@
 
         <div class="span12">
           <h4 id="title">Localized OpenStreetMap example</h4>
-          <p id="shortdesc">Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.</p>
+          <p id="shortdesc">Example of a localized OpenStreetMap map with a custom tile server and a custom attribution. The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. The OpenSeaMap tile server does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
           <div id="docs">
             <p>See the <a href="localized-openstreetmap.js" target="_blank">localized-openstreetmap.js source</a> to see how this is done.</p>
           </div>
-          <div id="tags">localized-openstreetmap, openstreetmap</div>
+          <div id="tags">cors, localized-openstreetmap, openseamap, openstreetmap</div>
         </div>
 
       </div>

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 © ' +
+            '<a href="http://www.opencyclemap.org/">OpenCycleMap</a>'
+      }),
+      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 &copy; ' +
+            '<a href="http://www.openseamap.org/">OpenSeaMap</a>'
+      }),
+      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({
+    openCycleMapLayer,
-      source: new ol.source.OSM({
+    openSeaMapLayer
-        attributions: [
-          new ol.Attribution({
-            html: 'All maps &copy; ' +
-                '<a href="http://www.opencyclemap.org/">OpenCycleMap</a>'
-          }),
-          ol.source.OSM.DATA_ATTRIBUTION
-        ],
-        url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
-      })
-    })
   ],
-  renderers: ol.RendererHints.createFromQueryData(),
+  renderer: ol.RendererHint.CANVAS,
   target: 'map',
   view: new ol.View2D({
     maxZoom: 18,
-    center: [-172857, 5977746],
+    center: [-244780.24508882355, 5986452.183179816],
-    zoom: 12
+    zoom: 15
   })
 });

src/objectliterals.jsdoc

@@ -666,6 +666,8 @@
 /**
  * @typedef {Object} olx.source.OSMOptions
  * @property {Array.<ol.Attribution>|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.

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,