admin管理员组文章数量:1322364
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: '© <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: '© <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?
Share Improve this question edited Dec 1, 2014 at 17:35 maRtin asked Dec 1, 2014 at 17:29 maRtinmaRtin 6,52611 gold badges45 silver badges68 bronze badges3 Answers
Reset to default 6If 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>
本文标签: javascriptClickable Lcontrol on leafletStack Overflow
版权声明:本文标题:javascript - Clickable L.control on leaflet - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742111204a2421264.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论