diff --git a/css/ol.css b/css/ol.css
index 8763dbc6e7..4e73a667ef 100644
--- a/css/ol.css
+++ b/css/ol.css
@@ -81,6 +81,13 @@ a.ol-full-screen-true:after {
display: inline;
list-style: none;
}
+
+.ol-mouseposition {
+ top: 8px;
+ right: 8px;
+ position: absolute;
+}
+
.ol-scale-line {
background: rgba(0,60,136,0.3);
border-radius: 4px;
diff --git a/examples/mouse-position.html b/examples/mouse-position.html
index 74f85c76f1..5cdf3e36b1 100644
--- a/examples/mouse-position.html
+++ b/examples/mouse-position.html
@@ -8,6 +8,12 @@
Mouse position example
+
diff --git a/examples/mouse-position.js b/examples/mouse-position.js
index 7101c327ca..dc3a2163f7 100644
--- a/examples/mouse-position.js
+++ b/examples/mouse-position.js
@@ -13,6 +13,8 @@ var map = new ol.Map({
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.toStringHDMS,
projection: 'EPSG:4326',
+ // comment the following line to have the mouse position
+ // be placed within the map.
target: document.getElementById('mouse-position'),
undefinedHTML: ' '
})
diff --git a/src/ol/control/mousepositioncontrol.js b/src/ol/control/mousepositioncontrol.js
index 3b54a155e4..b4ce9361b9 100644
--- a/src/ol/control/mousepositioncontrol.js
+++ b/src/ol/control/mousepositioncontrol.js
@@ -28,7 +28,7 @@ ol.control.MousePosition = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {};
var element = goog.dom.createDom(goog.dom.TagName.DIV, {
- 'class': 'ol-mouse-position'
+ 'class': 'ol-mouseposition'
});
goog.base(this, {