From 46f63f135842faea0d3a16e0bd64448f81186c73 Mon Sep 17 00:00:00 2001
From: Tom Payne <twpayne@gmail.com>
Date: Tue, 10 Dec 2013 13:13:22 +0100
Subject: [PATCH 1/2] Add crossOrigin option to ol.source.OSM options

---
 src/objectliterals.jsdoc   | 2 ++
 src/ol/source/osmsource.js | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc
index e9c0fe5c09..709810cf94 100644
--- a/src/objectliterals.jsdoc
+++ b/src/objectliterals.jsdoc
@@ -665,6 +665,8 @@
 /**
  * @typedef {Object} ol.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.
diff --git a/src/ol/source/osmsource.js b/src/ol/source/osmsource.js
index 92e13ec6b8..96012bc18d 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,

From aa10a542ae23f382c76a7094682a6077b37bdc6d Mon Sep 17 00:00:00 2001
From: Tom Payne <twpayne@gmail.com>
Date: Fri, 13 Dec 2013 22:03:24 +0100
Subject: [PATCH 2/2] Add OpenSeaMap layer to localized-openstreetmap example

---
 examples/localized-openstreetmap.html |  4 +-
 examples/localized-openstreetmap.js   | 53 +++++++++++++++++++--------
 2 files changed, 39 insertions(+), 18 deletions(-)

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 @@
 
         <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>
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 &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'
+  })
+});
+
+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({
-      source: new ol.source.OSM({
-        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'
-      })
-    })
+    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
   })
 });