Edit output line function ol.control.MouseControl

Question

I would like to change the output text inside the target attribute ol.control.MouseControl (openlayers 3.15.1). Now the code shows only the value of longitude and latitude. I want to add the string "long" and "lat" before a single value: for example lat: 12.543, long: 14.567. How can i do this?

var regStyle = new ol.style.Style ({

           fill: new ol.style.Fill({

            color: 'rgba(127,129,112,0.1)'


           }),
           stroke: new ol.style.Stroke({

            color: 'green', width: 2})                             
        });


var reg = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'http://localhost:8080/Project_first/assets/geojson/regioni.geojson',
    format: new ol.format.GeoJSON(),
    projection: 'EPSG:3857' 
  }),

  style: regStyle
});




var prov = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'http://localhost:8080/Project_first/assets/kml/province.kml',
    format: new ol.format.KML(),
    projection: 'EPSG:3857'

  })
});


  var base_layer = new ol.layer.Tile({

    source: new ol.source.OSM()
  }); 

  var italy = ol.proj.fromLonLat([14.334, 40.965])

  var view = new ol.View({

    center: italy,
    zoom: 6,
  });


var scale = new ol.control.ScaleLine({

  className: 'ol-scale-line',
  target: document.getElementById('scale-line')
});




  var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(2),
        projection: 'EPSG:3857',
        // 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: ' '
      });











  var scale = new ol.control.ScaleLine();

  var map = new ol.Map({

     controls: ol.control.defaults({
          attributionOptions: ({  collapsible: false })

           }).extend([mousePositionControl, scale]),

    target: 'map',
    layers: [base_layer, prov,reg],
    view: view

  });





  function initMap()
{
    // do map object creation and initialization here
    // ...

    // add a click event handler to the map object
    GEvent.addListener(map, "click", function(overlay, latLng)
    {
        // display the lat/lng in your form lat/lng fields
        document.getElementById("lat").value = latLng.lat();
        document.getElementById("lng").value = latLng.lng();
    });
}

Answer 1

You can create a custom function like this:

function formatCoord(fraction) {
  var template = 'Coordinate is: {x} | {y}';
  return (
    function(coordinate) {
        return ol.coordinate.format(coordinate, template, fraction);
    });
}

And then pass it to the constructor coordinateFormatin ol.control.MousePosition:

var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: formatCoord(2),
  projection: 'EPSG:4326',
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
  undefinedHTML: ' '
});

See http://jsfiddle.net/jonataswalker/qchbpawm/ .

Answer 2

There the solution works:

function formatC(prec) {
  var template = 'Coordinate is: {x} | {y}';
  return (
    function(coordinate) {
        var cs = ol.coordinate.format(coordinate, template, fraction);
        console.log( 'cs='+cs);
        return
    });
}

var mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: formatC(6), // ol.coordinate.createStringXY(6), 
    projection: 'EPSG:4326',
    className: 'custom-mouse-position',
    target: document.getElementById('mapCoDiv'), //   'latitude'
    undefinedHTML: ' '
});

2) , render:

    var assCoor = function(e) {

        var coo = e. ????? 
        var lat, long = coo.split(',');
        console.log( 'lat='+lat+',   long='+long ); 
        $('#'+this.latEl).val(lat);
        $('#'+this.longEl).val(long);    
    }; 


   var mousePositionControl = new ol.control.MousePosition({
        // shall disbale this function coordinateFormat: formatCoord(6), // ol.coordinate.createStringXY(6), 
        projection: 'EPSG:4326',
        render : assCoor,
        className: 'custom-mouse-position',
        target: document.getElementById('mapCoDiv'), //   'latitude'
        undefinedHTML: ' '

    });