javascript - Leaflet.js: Allow default drag/zoom options with HTML elements on top of map DIV -

i'm using javascript/css 'draw' own div , img elements on top of leaflet controlled map. i've managed synchronise pan , zoom movements looks own elements part of map in background.

the major backside: when place mouse on custom html elements, mouse icon changes 'move' icon default pointer, , it's not possible drag or zoom map.

is there way give specific html elements on page drag , zoom controls on maptiles ? not want on elements though, of them need offer different kind of user interaction.

i haven't explored custom layer system of leaflet yet. assume html elements of such custom layers have controls default too. there reasons why prefer place html elements on top of map, seperate leaflet div.

you should use l.control layers, you've described, html elements embed inside map , work you've said.

they easy use , initialize using l.control.extend method.

here example:

var self = this; var newbutton; l.control.currentposition = l.control.extend({   onadd: function (map) {     //this method called when new control added later 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 new control map object this.map.addcontrol(new l.control.newbutton()); 

you ;)