Leaflet.js: allow default drag / zoom options with HTML elements on top of the DIV map

Question

I use javascript / css to "draw" my own DIV and IMG elements on top of the control leaflet. I managed to synchronize the pan and zoom movements, so that my own elements are really part of the map in the background.

The only major backside: when I mouse over my custom HTML elements, the mouse icon changes from the "move" icon to the default pointer, and it’s not possible to drag or zoom the map.

Is there a way to provide certain HTML elements on the page with drag and drop controls, for example on maptiles? I do not want this on all elements, although some of them will have to offer different types of user interaction.

I have not yet studied the user level system in Leaflet. I assume that the HTML elements of such custom layers are likely to have these controls as well by default. But there are some reasons why I would prefer to place HTML elements on top of the map, separate from the div sheet.

Answer 1

L.control, , , HTML, , .

L.Control.extend.

:

var self = this;
var newButton;
L.Control.currentPosition = L.Control.extend({
  onAdd: function (map) {
    //this method is called when this new control is added later to your map
    var className = 'your-custom-container-class',
    container = L.DomUtil.create('div', className);
    newButton = this._createButton(
      '', 'your-button-title',  'your-custom-button-class', 'your-button-id', container, this.newButtonFunction,  self);
    return container;
  },

  newButtonFunction: function(ev){

  },

  _createButton: function (html, title, className, id, container, fn, context) {
    var link = L.DomUtil.create('a', className, container);
    link.innerHTML = html;
    link.href = '#';
    link.title = title;
    link.id = id;
    var stop = L.DomEvent.stopPropagation;
    L.DomEvent
      .on(link, 'click', stop)
      .on(link, 'mousedown', stop)
      .on(link, 'dblclick', stop)
      .on(link, 'click', L.DomEvent.preventDefault)
      .on(link, 'click', fn, context);
    return link;
  }
});

//finally add the new control to your map object
this.map.addControl(new L.Control.newButton());

- :)