Harry Wood

home > maps > examples > openlayers > OpenLayers MousePosition

OpenLayers MousePosition

Basic use of the MousePosition control to show mouse coordinates in the bottom right. Note that you should set displayProjection when initalising the map object.
​x
 
<html>
<head>
  <title>OpenLayers MousePosition Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>           
  <style type="text/css">
    html, body, #mapdiv {
        width:100%; height:100%; margin:0;
    }
  </style>
</head>
  
<body>
  <div id="mapdiv"></div>
  <script>
    epsg4326 = new OpenLayers.Projection("EPSG:4326")
  
    map = new OpenLayers.Map({
                  div: "mapdiv",
                  displayProjection: epsg4326
            } );
            
    //Add the MousePosition control to show coordinates
    map.addControl(new OpenLayers.Control.MousePosition());
    
    map.addLayer(new OpenLayers.Layer.OSM());
​
    map.zoomToMaxExtent();
  </script>
  
</body></html>

view directly