Mouse position example

Example of a mouse position control, outside the map.

Example of a mouse position control, outside the map.

mouse-position, openstreetmap
<!DOCTYPE html>
<html>
<head>
<title>Mouse position example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.9.0/build/ol.js"></script>

</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
</div>
<div class="span6">
  <form>
    <label>Projection </label>
    <select id="projection">
      <option value="EPSG:4326">EPSG:4326</option>
      <option value="EPSG:3857">EPSG:3857</option>
    </select>
    <label>Precision </label>
    <input id="precision" type="number" min="0" max="12" value="4"/>
  </form>
</div>
<div class="span6" id="mouse-position">&nbsp;</div>

</div>
<script>
var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(4),
  projection: 'EPSG:4326',
  // comment the following two lines to have the mouse position
  // be placed within the map.
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
  undefinedHTML: '&nbsp;'
});

var map = new ol.Map({
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }).extend([mousePositionControl]),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

var projectionSelect = $('#projection');
projectionSelect.on('change', function() {
  mousePositionControl.setProjection(ol.proj.get(this.value));
});
projectionSelect.val(mousePositionControl.getProjection().getCode());

var precisionInput = $('#precision');
precisionInput.on('change', function() {
  var format = ol.coordinate.createStringXY(this.valueAsNumber);
  mousePositionControl.setCoordinateFormat(format);
});

</script>
</body>
</html>