function(el, x, data) {

        // get the leaflet map
        var map = this; //HTMLWidgets.find('#' + el.id);

        // we need a new div element because we have to handle
        // the mouseover output separately
        // debugger;
        function addElement () {
          // generate new div Element
         var newDiv = $(document.createElement('div'));
          // append at end of leaflet htmlwidget container
          $(el).append(newDiv);
          //provide ID and style
          newDiv.addClass('lnlt');
          newDiv.css({
            'position': 'relative',
            'bottomleft':  '0px',
            'background-color': 'rgba(255, 255, 255, 0.7)',
            'box-shadow': '0 0 2px #bbb',
            'background-clip': 'padding-box',
            'margin': '0',
            'padding-left': '5px',
            'color': '#333',
            'font': '9px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif',
            'z-index': '700',
          });
          return newDiv;
        }

        // check for already existing lnlt class to not duplicate
        var lnlt = $(el).find('.lnlt');

        if(!lnlt.length) {
          lnlt = addElement();
          //$(el).keypress(function (e) {
          //  if (e.which == 32 || event.keyCode == 32) {
          //    alert('space key is pressed');
          //  }
          //});
          // grab the special div we generated in the beginning
          // and put the mousmove output there
          map.on('mousemove', function (e) {
            lnlt.text(
                           ' x: ' + L.CRS.EPSG3857.project(e.latlng).x.toFixed(0) +
                           ' | y: ' + L.CRS.EPSG3857.project(e.latlng).y.toFixed(0) +
                           ' | epsg: 3857 ' +
                           ' | proj4: +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs ' +
                           ' | lon: ' + (e.latlng.lng).toFixed(5) +
                           ' | lat: ' + (e.latlng.lat).toFixed(5) +
                           ' | zoom: ' + map.getZoom() + ' ');
          });
        };
      }