Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

This is my code and I am trying to obtain the MouseOver to be displayed outside the Map container.

<!DOCTYPE html>
        <title>My Map</title>
        <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
            #map-id {
                width: 1024px;
                height: 512px;
             #location {
                float: right;
        <script src="openlayers/lib/OpenLayers.js"></script>
        <h1>My Map</h1>
        <div id="map-id"></div>
            var map = new OpenLayers.Map("map-id");
            var bio = new OpenLayers.Layer.WMS(
              {layers: 'iPlant:bio11'}
            var imagery = new OpenLayers.Layer.WMS(
                "Global Imagery",
                {layers: "bluemarble"}
            map.addLayers([imagery, bio]); //map.addLayers([untiled, tiled]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
  "click", map , function(e){
            var latlon = map.getLonLatFromViewPortPx(e.xy) ;
            var lat = Math.round(;
            var lon = Math.round(latlon.lon);
            document.getElementById("location").innerHTML = "The Latitude is " + lat + " and the Longitude is " + lon;
            //window.location = ""+lat+"&lon="+lon;

        <div id="location">Position</div>

I am using the , the mouse over co-ordinates are only appearing at the bottom right of the map (within the map container).

share|improve this question
up vote 1 down vote accepted

i think your code would be worked, when your main code was in body tag of init...

if not, try to change:

var latlon =;
OpenLayers.Util.getElement("location").innerHTML = ....

and put them all init() function which will locate in body... you can check source code of mouse position control example.



ok. sorry for the late answer, i have newly noticed that sth wrong with the above code.

try to change sth like this, it will give you the same result as OpenLayers.Control.MousePosition() give:"mousemove", map, function(e) { 
    var position =;
    var latlon = map.getLonLatFromViewPortPx(e.xy) ;
    var lat = Math.round(;
    var lon = Math.round(latlon.lon);               
    OpenLayers.Util.getElement("coords").innerHTML = "The Latitude is " + lat +
        " and the Longitude is " + lon;

i hope it helps you....

share|improve this answer
Ok there is a issue, the x, y co-ordinates not exactly as it should be. If u compare in the link that you gave me, the co-ordinates in the Map control and in the div are not same. The div is giving back some kind or reference values. There is no negative co-ordinates – Sam007 May 3 '12 at 20:05
i have updated my answer.. – Aragon May 4 '12 at 7:57
Thanks man that works. just one question Why did u need this line, var position =; – Sam007 May 4 '12 at 16:33
Oh sorry. i have forgetten to delete the line, you mentioned... – Aragon May 4 '12 at 17:01

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.