ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Enhancements to the MouseCoordinates example.

Browse Source 
Non-functional change.
This commit is contained in:
Marc Jansen
2012-08-17 23:40:18 +02:00
parent df19317c95
commit b7063b364c
1 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/mouse-position.html
+32 -12
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" debug="true"> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
@@ -7,41 +7,61 @@
<title>MousePosition Control</title> <title>MousePosition Control</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css"> <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
var map; var map;
function init(){ function init(){
var map = new OpenLayers.Map('map'); var map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(
new OpenLayers.Control.MousePosition({
prefix: '<a target="_blank" ' +
'href="http://spatialreference.org/ref/epsg/4326/">' +
'EPSG:4326</a> coordinates: ',
separator: ' | ',
numDigits: 2,
emptyString: 'Mouse is not over map.'
})
);
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", "http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} ); {layers: 'basic'} );
map.addLayers([ol_wms]); map.addLayers([ol_wms]);
if (!map.getCenter()) map.zoomToMaxExtent(); if (!map.getCenter()) {
map.zoomToMaxExtent();
}
map.events.register("mousemove", map, function(e) { map.events.register("mousemove", map, function(e) {
var position = this.events.getMousePosition(e); var position = this.events.getMousePosition(e);
OpenLayers.Util.getElement("coords").innerHTML = position; OpenLayers.Util.getElement("coords").innerHTML = position;
}); });
} }
</script> </script>
</head> </head>
<body onload="init()"> <body onload="init();">
<h1 id="title">MousePosition Control</h1> <h1 id="title">MousePosition Control</h1>
<div id="tags"> <div id="tags">
coordinate coordinate
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Use the MousePosition Control to display the coordinates of the cursor Use the MousePosition Control to display the coordinates of the cursor
inside or outside the map div. inside or outside the map div.
</p> </p>
<div id="map" class="smallmap"></div> <div id="map" class="smallmap"></div>
<div id="coords"></div> <div id="coords" style="height: 1.5em;"></div>
<p>Moving your mouse to the upper left corner of this map should return <p>
'x=0,y=0' -- in the past, it didn't in IE. If it returns 2,2, consider it a This example also shows how to use the the "prefix", "separator" and
bug, and report it.</p> "numDigits" options to customize the output of the MousePosition-Control.
By also setting the "emptyString"-property, the contents of the controls
element are resetted to the given string when the mouse isn't above the
map.
</p>
<p>
Moving your mouse to the upper left corner of this map should return
'x=0,y=0' (pixel coordinates) -- in the past, it didn't in IE. If it
returns 'x=2,y=2', consider it a bug, and report it.
</p>
</body> </body>
</html> </html>