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
   })
 });
diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc
index 71636f4f7c..6f981585ed 100644
--- a/src/objectliterals.jsdoc
+++ b/src/objectliterals.jsdoc
@@ -497,6 +497,7 @@
 /**
  * @typedef {Object} olx.source.MapGuideOptions
  * @property {string|undefined} url The mapagent url.
+ * @property {number|undefined} displayDpi The display resolution. Default is `96`.
  * @property {number|undefined} metersPerUnit The meters-per-unit value. Default is `1`.
  * @property {ol.Extent|undefined} extent Extent.
  * @property {boolean|undefined} useOverlay If `true`, will use
@@ -528,6 +529,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.
diff --git a/src/ol/source/mapguidesource.js b/src/ol/source/mapguidesource.js
index a8ddc8484b..8389f17f10 100644
--- a/src/ol/source/mapguidesource.js
+++ b/src/ol/source/mapguidesource.js
@@ -31,6 +31,13 @@ ol.source.MapGuide = function(options) {
     imageUrlFunction: imageUrlFunction
   });
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.displayDpi_ = goog.isDef(options.displayDpi) ?
+      options.displayDpi : 96;
+
   /**
    * @private
    * @type {number}
@@ -91,20 +98,20 @@ ol.source.MapGuide.prototype.getImage =
 /**
  * @param {ol.Extent} extent The map extents.
  * @param {ol.Size} size the viewport size.
+ * @param {number} metersPerUnit The meters-per-unit value.
+ * @param {number} dpi The display resolution.
  * @return {number} The computed map scale.
  */
-ol.source.MapGuide.prototype.getScale = function(extent, size) {
-  var mcsW = extent[2] - extent[0];
-  var mcsH = extent[3] - extent[1];
+ol.source.MapGuide.getScale = function(extent, size, metersPerUnit, dpi) {
+  var mcsW = ol.extent.getWidth(extent);
+  var mcsH = ol.extent.getHeight(extent);
   var devW = size[0];
   var devH = size[1];
-  var dpi = 96;
-  var mpu = this.metersPerUnit_;
   var mpp = 0.0254 / dpi;
   if (devH * mcsW > devW * mcsH) {
-    return mcsW * mpu / (devW * mpp); // width limited
+    return mcsW * metersPerUnit / (devW * mpp); // width limited
   } else {
-    return mcsH * mpu / (devH * mpp); // height limited
+    return mcsH * metersPerUnit / (devH * mpp); // height limited
   }
 };
 
@@ -119,19 +126,21 @@ ol.source.MapGuide.prototype.getScale = function(extent, size) {
  */
 ol.source.MapGuide.prototype.getUrl =
     function(baseUrl, params, extent, size, projection) {
-  var scale = this.getScale(extent, size);
+  var scale = ol.source.MapGuide.getScale(extent, size,
+      this.metersPerUnit_, this.displayDpi_);
+  var center = ol.extent.getCenter(extent);
   var baseParams = {
     'OPERATION': this.useOverlay_ ? 'GETDYNAMICMAPOVERLAYIMAGE' : 'GETMAPIMAGE',
     'VERSION': '2.0.0',
     'LOCALE': 'en',
     'CLIENTAGENT': 'ol.source.MapGuide source',
     'CLIP': '1',
-    'SETDISPLAYDPI': 96,
+    'SETDISPLAYDPI': this.displayDpi_,
     'SETDISPLAYWIDTH': Math.round(size[0]),
     'SETDISPLAYHEIGHT': Math.round(size[1]),
     'SETVIEWSCALE': scale,
-    'SETVIEWCENTERX': (extent[0] + extent[2]) / 2,
-    'SETVIEWCENTERY': (extent[1] + extent[3]) / 2
+    'SETVIEWCENTERX': center[0],
+    'SETVIEWCENTERY': center[1]
   };
   goog.object.extend(baseParams, params);
   return goog.uri.utils.appendParamsFromMap(baseUrl, baseParams);
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,