diff --git a/examples/mouse-position.html b/examples/mouse-position.html new file mode 100644 index 0000000000..9412d00c99 --- /dev/null +++ b/examples/mouse-position.html @@ -0,0 +1,53 @@ + + + + + + + + + + Mouse position example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+

Mouse position example

+

Example of a mouse position control, outside the map.

+
+

See the mouse-position.js source to see how this is done.

+
+
mouse-position, openstreetmap
+
+ +
+ +
+ + + + + diff --git a/examples/mouse-position.js b/examples/mouse-position.js new file mode 100644 index 0000000000..de89c3a573 --- /dev/null +++ b/examples/mouse-position.js @@ -0,0 +1,32 @@ +goog.require('ol.Coordinate'); +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.control.MousePosition'); +goog.require('ol.control.defaults'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.projection'); +goog.require('ol.source.OpenStreetMap'); + + +var map = new ol.Map({ + controls: ol.control.defaults({}, [ + new ol.control.MousePosition({ + coordinateFormat: ol.Coordinate.toStringHDMS, + projection: ol.projection.getFromCode('EPSG:4326'), + target: document.getElementById('mouse-position'), + undefinedHTML: ' ' + }) + ]), + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.OpenStreetMap() + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: new ol.Coordinate(0, 0), + zoom: 2 + }) +});