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 = 'StreetsAerialsZoning'; this._baseLayerDropDown.firstChild.onmousedown = this._baseLayerDropDown.firstChild.ondblclick = L.DomEvent.stopPropagation; L.DomEvent.on(this._baseLayerDropDown, 'change', this._onBaseLayerChange,this); }, Any hints would be greatly appreciated.
Best Regards, Tyler
أكثر...
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 = 'StreetsAerialsZoning'; this._baseLayerDropDown.firstChild.onmousedown = this._baseLayerDropDown.firstChild.ondblclick = L.DomEvent.stopPropagation; L.DomEvent.on(this._baseLayerDropDown, 'change', this._onBaseLayerChange,this); }, Any hints would be greatly appreciated.
Best Regards, Tyler
أكثر...