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:
Thomas
2013-05-05 15:58:46 +02:00
committed by Éric Lemoine
parent 10b690b5f9
commit f219393149
4 changed files with 16 additions and 1 deletions

View File

@@ -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;

View File

@@ -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>

View File

@@ -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: '&nbsp;' undefinedHTML: '&nbsp;'
}) })

View File

@@ -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, {