Add OpenSeaMap layer to localized-openstreetmap example

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
   })
 });