I am trying to add a L.Control element to my leaflet map. However once I added the element to my map, I noticed that its not clickable. I would like to display a form inside this L.Control element, however I cant select any elements from my drop down menus, since the clicks always go through to the map.

Here a JSfiddle: /

as well as my JS code:

var map = L.map('map').setView([0.27, 37.66], 6);

        // add an OpenStreetMap tile layer
        L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="">OpenStreetMap</a> contributors'
        }).addTo(map);


        var mainMenu = L.Control.extend({
                options: {position: 'topright'},

        onAdd : function (map) { 
                this._div = L.DomUtil.create('div', 'mainMenu');
                this._div.innerHTML =  '<h3>Main Menu</h3>';

        this._div.innerHTML +=  '<h4>Data:</h4> MODIS NDVI <h4>AOI:</h4> Kenya, Africa <br><br>'
        this._div.innerHTML +=  '<h4>Indicator:</h4>'
        this._div.innerHTML +=  '<form><form id="form" class="form" action="" method="POST">' +
                        '<select name="indicator"><option value="NDVI_ABS">NDVI<br>' + 
                        '<option value="NDVI_VCI">VCI<br>' +
                        '<option value="RAIN_ABS">Precipitation<br>' +
                        '</select>';                        
        this._div.innerHTML += '<input type="submit" value="Refresh Map"  name="submit"></form>';   
        return this._div;     
                },                                  
        });
        map.addControl(new mainMenu());

Any suggestions on how to make it clickable?

I am trying to add a L.Control element to my leaflet map. However once I added the element to my map, I noticed that its not clickable. I would like to display a form inside this L.Control element, however I cant select any elements from my drop down menus, since the clicks always go through to the map.

Here a JSfiddle: http://jsfiddle/fd3dnnc1/1/

as well as my JS code:

var map = L.map('map').setView([0.27, 37.66], 6);

        // add an OpenStreetMap tile layer
        L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);


        var mainMenu = L.Control.extend({
                options: {position: 'topright'},

        onAdd : function (map) { 
                this._div = L.DomUtil.create('div', 'mainMenu');
                this._div.innerHTML =  '<h3>Main Menu</h3>';

        this._div.innerHTML +=  '<h4>Data:</h4> MODIS NDVI <h4>AOI:</h4> Kenya, Africa <br><br>'
        this._div.innerHTML +=  '<h4>Indicator:</h4>'
        this._div.innerHTML +=  '<form><form id="form" class="form" action="" method="POST">' +
                        '<select name="indicator"><option value="NDVI_ABS">NDVI<br>' + 
                        '<option value="NDVI_VCI">VCI<br>' +
                        '<option value="RAIN_ABS">Precipitation<br>' +
                        '</select>';                        
        this._div.innerHTML += '<input type="submit" value="Refresh Map"  name="submit"></form>';   
        return this._div;     
                },                                  
        });
        map.addControl(new mainMenu());

Any suggestions on how to make it clickable?

• javascript
• leaflet

3 Answers 3

If you take a look at the source of L.Control.Layers which is supplied with Leaflet you can see that they use L.DomEvent to disable or stop propagation of click and/or scroll events on the container. You should do exactly the same and it will work as expected:

if (!L.Browser.touch) {
    L.DomEvent
        .disableClickPropagation(this._div)
        .disableScrollPropagation(this._div);
} else {
    L.DomEvent.on(this._div, 'click', L.DomEvent.stopPropagation);
}

An updated Fiddle: http://jsfiddle/az9w0r5L/

Did you hook up a click handler to your button? I updated your fiddle with this:

$('#refreshBtn').on('click', function () {
    alert('hello world');
});

and I get the alert.

I found a solution: I am actually not using L.Control anymore, but I decided to use a new div tag instead with the use of CSS (z-index):

JSFiddle: http://jsfiddle/fd3dnnc1/3/

#menu {
position: absolute;
width: 300px;
z-index: 100;
}


#map {
height:100%;
width:100%;
z-index: 1;
}

<div id="map"></div>
<div id="menu">Menu Content here</div>