Add default CSS style for mouse position
Missing CSS was confirmed with issue #680, this commit is to fix it and change ol-mouse-position class to ol-mouseposition. I choose for the moment the top right corner to display the coordinates from mouse position control because of potential conflict with the scaleline control.
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -8,6 +8,12 @@
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Mouse position example</title>
|
||||
<style type="text/css">
|
||||
/* Nullify the default .ol-mouseposition rule */
|
||||
#mouse-position .ol-mouseposition {
|
||||
position: static;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
@@ -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: ' '
|
||||
})
|
||||
|
||||
@@ -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, {
|
||||
|
||||
Reference in New Issue
Block a user