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;
|
display: inline;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ol-mouseposition {
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
.ol-scale-line {
|
.ol-scale-line {
|
||||||
background: rgba(0,60,136,0.3);
|
background: rgba(0,60,136,0.3);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|||||||
@@ -8,6 +8,12 @@
|
|||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||||
<title>Mouse position example</title>
|
<title>Mouse position example</title>
|
||||||
|
<style type="text/css">
|
||||||
|
/* Nullify the default .ol-mouseposition rule */
|
||||||
|
#mouse-position .ol-mouseposition {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|||||||
@@ -13,6 +13,8 @@ var map = new ol.Map({
|
|||||||
new ol.control.MousePosition({
|
new ol.control.MousePosition({
|
||||||
coordinateFormat: ol.coordinate.toStringHDMS,
|
coordinateFormat: ol.coordinate.toStringHDMS,
|
||||||
projection: 'EPSG:4326',
|
projection: 'EPSG:4326',
|
||||||
|
// comment the following line to have the mouse position
|
||||||
|
// be placed within the map.
|
||||||
target: document.getElementById('mouse-position'),
|
target: document.getElementById('mouse-position'),
|
||||||
undefinedHTML: ' '
|
undefinedHTML: ' '
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ ol.control.MousePosition = function(opt_options) {
|
|||||||
var options = goog.isDef(opt_options) ? opt_options : {};
|
var options = goog.isDef(opt_options) ? opt_options : {};
|
||||||
|
|
||||||
var element = goog.dom.createDom(goog.dom.TagName.DIV, {
|
var element = goog.dom.createDom(goog.dom.TagName.DIV, {
|
||||||
'class': 'ol-mouse-position'
|
'class': 'ol-mouseposition'
|
||||||
});
|
});
|
||||||
|
|
||||||
goog.base(this, {
|
goog.base(this, {
|
||||||
|
|||||||
Reference in New Issue
Block a user