1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.control');
|
4 | goog.require('ol.control.MousePosition');
|
5 | goog.require('ol.coordinate');
|
6 | goog.require('ol.layer.Tile');
|
7 | goog.require('ol.source.OSM');
|
8 |
|
9 | var mousePositionControl = new ol.control.MousePosition({
|
10 | coordinateFormat: ol.coordinate.createStringXY(4),
|
11 | projection: 'EPSG:4326',
|
12 |
|
13 |
|
14 | className: 'custom-mouse-position',
|
15 | target: document.getElementById('mouse-position'),
|
16 | undefinedHTML: ' '
|
17 | });
|
18 |
|
19 | var map = new ol.Map({
|
20 | controls: ol.control.defaults({
|
21 | attributionOptions: {
|
22 | collapsible: false
|
23 | }
|
24 | }).extend([mousePositionControl]),
|
25 | layers: [
|
26 | new ol.layer.Tile({
|
27 | source: new ol.source.OSM()
|
28 | })
|
29 | ],
|
30 | target: 'map',
|
31 | view: new ol.View({
|
32 | center: [0, 0],
|
33 | zoom: 2
|
34 | })
|
35 | });
|
36 |
|
37 | var projectionSelect = document.getElementById('projection');
|
38 | projectionSelect.addEventListener('change', function(event) {
|
39 | mousePositionControl.setProjection(event.target.value);
|
40 | });
|
41 |
|
42 | var precisionInput = document.getElementById('precision');
|
43 | precisionInput.addEventListener('change', function(event) {
|
44 | var format = ol.coordinate.createStringXY(event.target.valueAsNumber);
|
45 | mousePositionControl.setCoordinateFormat(format);
|
46 | });
|