[GIS] Leaflet Map Dropdown

eventsleafletmobile

I am attempting to create a simple basemap selector to use in a Leaflet map to assist in selecting a basemap of interest. I've created a new Select control that works great in a computer browser but does not respond when accessed via mobile device. I am guessing the mouse events in the following line of code are causing the problem:

this._baseLayerDropDown.firstChild.onmousedown = this._baseLayerDropDown.firstChild.ondblclick = L.DomEvent.stopPropagation;

However, I have no idea how to reengineer this line to make the Select responsive in the mobile environment.

Anyone have any ideas?

Here is a larger sample of my code:

basemapControl = L.Control.extend({
    options: {
        position: 'bottomleft'
    },
    
    onAdd: function (map) {
        // create the control container with a particular class name
        this._initLayout();
        return this._container;
    },
    _initLayout: function(){
        var className = 'basemapControl'
        var container = this._container = L.DomUtil.create('div', className);
        // var form = this._form = L.DomUtil.create('form', className + '-list');
        this._baseLayersList = L.DomUtil.create('div', className + '-base');
        container.appendChild(this._baseLayersList);
        
        this._baseLayerDropDown = L.DomUtil.create('div', 'basemapDropDown', this._baseLayersList);
        this._baseLayerDropDown.innerHTML = '<select id = "basemapSelect" style="width: 100px"><option value = "Streets">Streets</option><option value = "Aerials">Aerials</option><option value = "Zoning">Zoning</option></select>';
        this._baseLayerDropDown.firstChild.onmousedown = this._baseLayerDropDown.firstChild.ondblclick = L.DomEvent.stopPropagation;
        L.DomEvent.on(this._baseLayerDropDown, 'change', this._onBaseLayerChange,this);

    },

Best Answer

You need to add

L.DomEvent.disableClickPropagation(this._baseLayerDropDown);

That seems to allow it to work once that is added. This fixes it for version 0.7.3 of leaflet. If that line doesn't work, try doing it to the first div or something.

Related Question