diff --git a/demos/side-by-side/index.html.in b/demos/side-by-side/index.html.in
index 179592c67f..38b77955dd 100644
--- a/demos/side-by-side/index.html.in
+++ b/demos/side-by-side/index.html.in
@@ -21,6 +21,9 @@
                 <td><div id="domMap" class="map"></div></td>
                 <td><div id="webglMap" class="map"></div></td>
             </tr>
+            <tr>
+                <td><div id="domMousePosition" class="mouseposition"></div></td>
+                <td><div id="webglMousePosition" class="mouseposition"></div></td>
             <tr>
                 <td colspan="2">
                     <div id="attribution" class="attribution"></div>
diff --git a/demos/side-by-side/side-by-side.js b/demos/side-by-side/side-by-side.js
index c5cd067739..15643b8f55 100644
--- a/demos/side-by-side/side-by-side.js
+++ b/demos/side-by-side/side-by-side.js
@@ -1,5 +1,7 @@
+goog.require('ol.CoordinateFormat');
 goog.require('ol.RendererHint');
 goog.require('ol.control.Attribution');
+goog.require('ol.control.MousePosition');
 goog.require('ol.createMap');
 goog.require('ol.interaction.Keyboard');
 goog.require('ol.layer.MapQuestOpenAerial');
@@ -32,6 +34,16 @@ var attributionControl = new ol.control.Attribution(domMap);
 document.getElementById('attribution').appendChild(
     attributionControl.getElement());
 
+var domMousePositionControl = new ol.control.MousePosition(domMap,
+    ol.Projection.getFromCode('EPSG:4326'), ol.CoordinateFormat.hdms, '&nbsp;');
+document.getElementById('domMousePosition').appendChild(
+    domMousePositionControl.getElement());
+
+var webglMousePositionControl = new ol.control.MousePosition(webglMap,
+    ol.Projection.getFromCode('EPSG:4326'), ol.CoordinateFormat.hdms, '&nbsp;');
+document.getElementById('webglMousePosition').appendChild(
+    webglMousePositionControl.getElement());
+
 var keyboardInteraction = new ol.interaction.Keyboard();
 keyboardInteraction.addCallback('0', function() {
   layer.setBrightness(0);