4

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);

    },
3
  • Interesting. In the past I've just used Leaflet's L.control.layers and just not specified overlay layers. Have you check out the source code for that method? Commented Dec 16, 2013 at 18:42
  • I did check out L.control.layers and liked it alot. However, the design goals for this project will require a dropdown for base layers(we will have about 7 different baselayers(Streets, Aerials, Zoning, Future Land Use, Transportation & etc...)) to choose from. We also wnat to reserve radio buttons for a future bit of functionality that we intend to create for our basemap control. I'll dive back into this wen I get some time and report anything that I find. In the mean time, If anyone sees anything that sticks out like a sore thumb, please let me know. Thanks, Tyler Commented Dec 17, 2013 at 20:34
  • I have yet to find a solution either. I did notice that older versions of leaflet, a select works. However, with newer versions, it does not. Not sure what has changed since then.
    – Kalel Wade
    Commented Jul 15, 2015 at 14:38

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.