I think the question says it all. I am using leaflet. I am loading three layers onto the map.
However I can't find a way to know on which layer I clicked after clicking on the map. Basically because there is no event handler set on layers, only onto the map.
I also tried to add the layers into a feature group and add an on click event to this feature group. However clicking on the map does not result in any event / response.
This is what I did in the featureGroup:
addWaterNameLayers: function() {
var knownWaters = L.tileLayer.wms(getGeoServer('wms', geoEnviroment), {
layers: this.wmsLayers.known.name,
format: 'image/png',
opacity: 0,
styles: 'cursor: pointer',
transparent: true,
attribution: ""
});//.addTo(this.mapInfo);
var unknownWaters = L.tileLayer.wms(getGeoServer('wms', geoEnviroment), {
layers: this.wmsLayers.unknown.name,
format: 'image/png',
opacity: 0.3,
styles: '',
transparent: true,
attribution: ""
});
L.FeatureGroup(knownWaters, unknownWaters).on('click', function(event) {
console.log('click');
this.handleClick(event);
},this);
//this part will work on mapclick, so on featuregroup it should work?
//when clicking on the map
/*
this.mapInfo.on('click', function(event) {
this.handleClick(event);
}, this);
*/
},
in the code above you can see the click event on te map as well... that one works. on the featuregroup it doesn't.
Also when I change the code for the featureGroup to these it will not work either:
var featGr = L.FeatureGroup(knownWaters, unknownWaters).on('click', function(event) {
this.handleClick(event);
},this);
var featGr = L.FeatureGroup(knownWaters, unknownWaters);
featGr.on('click', function(event) {
this.handleClick(event);
},this);
adding the featureGroup to the layer will also do nothing...
I think the question says it all. I am using leaflet. I am loading three layers onto the map.
However I can't find a way to know on which layer I clicked after clicking on the map. Basically because there is no event handler set on layers, only onto the map.
I also tried to add the layers into a feature group and add an on click event to this feature group. However clicking on the map does not result in any event / response.
This is what I did in the featureGroup:
addWaterNameLayers: function() {
var knownWaters = L.tileLayer.wms(getGeoServer('wms', geoEnviroment), {
layers: this.wmsLayers.known.name,
format: 'image/png',
opacity: 0,
styles: 'cursor: pointer',
transparent: true,
attribution: ""
});//.addTo(this.mapInfo);
var unknownWaters = L.tileLayer.wms(getGeoServer('wms', geoEnviroment), {
layers: this.wmsLayers.unknown.name,
format: 'image/png',
opacity: 0.3,
styles: '',
transparent: true,
attribution: ""
});
L.FeatureGroup(knownWaters, unknownWaters).on('click', function(event) {
console.log('click');
this.handleClick(event);
},this);
//this part will work on mapclick, so on featuregroup it should work?
//when clicking on the map
/*
this.mapInfo.on('click', function(event) {
this.handleClick(event);
}, this);
*/
},
in the code above you can see the click event on te map as well... that one works. on the featuregroup it doesn't.
Also when I change the code for the featureGroup to these it will not work either:
var featGr = L.FeatureGroup(knownWaters, unknownWaters).on('click', function(event) {
this.handleClick(event);
},this);
var featGr = L.FeatureGroup(knownWaters, unknownWaters);
featGr.on('click', function(event) {
this.handleClick(event);
},this);
adding the featureGroup to the layer will also do nothing...
Share Improve this question edited May 13, 2020 at 22:24 yolenoyer 9,4653 gold badges35 silver badges66 bronze badges asked Nov 27, 2014 at 10:42 BonifatiusKBonifatiusK 2,3315 gold badges29 silver badges44 bronze badges 2- Did you find any solution to this? I have same problem... – efirat Commented Dec 22, 2019 at 18:33
- with WMS layers you need to iterate, but it has been a while back so can't remember. – BonifatiusK Commented Jan 16, 2020 at 15:18
3 Answers
Reset to default 2Put your layers in L.FeatureGroup. L.FeatureGroup is an extension of L.LayerGroup which adds events. It also supports the clickevent so that's exactly what your are looking for. Check the documentation: http://leafletjs./reference.html#featuregroup
event.layer
is layer data
event.originalEvent.path[0]
is element you clicked
L.FeatureGroup(knownWaters, unknownWaters).on('click', function(event: LeafletMouseEvent) {
console.log('click');console.log(event.layer) //event.layer is the layer clicked
this.handleClick(event);
},this);
The Code attaches a Click event handler on the FeatureGroup Layer which contains the "knownWaters" and "unknownWaters" layers. Clicking on the map( featuregroup) will pass a leafletMouseEvent which contains the layer within the layergroup that was clicked