I have a layer in Leaflet with polygons where there is also overlapping polygons. I want to be able to see which polygon is clicked on by using a highlight feature. But I have problems to make this work properly.
If I have a dataset with one set of polygons feature in one layerGroup there is no problem, but it is when I want to use it with multiple polygons with different features and split them into layerGroups that I am not able to solve. How can this be done with below code? Its an example of many feature polygons. Each polygon represent a distance area from a point on the map with values like 5 min, 10 min and 15 min, there is "polygon set" for many different points and they get overlap to each other when reaching a certain value like 10 and 15 minutes for example. I need to highlight each feature when clicked on to be able to see which polygon the point belong to. I did put in "VectorGrid_???", it is here I have the problem for it to work. Thank you..
polygon_sample:
var dist_5 = new L.layerGroup();
var dist_10 = new L.layerGroup();
var dist_15 = new L.layerGroup();
var highlight_distance;
var clearHighlight_distance = function() {
if (highlight_distance) {
vectorGrid_???.resetFeatureStyle(highlight_distance);
}
highlight_distance = null;
};
$.getJSON("../xyz/12345/distance.geojson", function(json) {
var vectorGrid_dist_5 = L.vectorGrid.slicer(json, {
maxZoom: 20,
zIndex: 20,
rendererFactory: L.svg.tile,
vectorTileLayerStyles: {
sliced: function(properties, zoom){
var cl = properties.cost_level;
if (cl === 300.0){
return {
weight: 2,
color: '#6c0370',
opacity: 1,
fill: true,
fillColor: '#ff00ff',
stroke: true,
fillOpacity: 0.3
}
} else {
return {
fillOpacity: 0,
stroke: false,
fill: false,
opacity: 0,
weight: 0
}
}
}
},
interactive: true,
getFeatureId: function(f) {
return f.properties.sid;
},
})
var vectorGrid_dist_10 = L.vectorGrid.slicer(json, {
maxZoom: 20,
zIndex: 19,
rendererFactory: L.svg.tile,
vectorTileLayerStyles: {
sliced: function(properties, zoom){
var cl = properties.cost_level;
if (cl === 600.0){
return {
weight: 2,
color: '#6c0370',
opacity: 1,
fill: true,
fillColor: '#ff00ff',
stroke: true,
fillOpacity: 0.2
}
} else {
return {
fillOpacity: 0,
stroke: false,
fill: false,
opacity: 0,
weight: 0
}
}
}
},
interactive: true,
getFeatureId: function(f) {
return f.properties.sid;
},
})
var vectorGrid_dist_15 = L.vectorGrid.slicer(json, {
maxZoom: 20,
zIndex: 18,
rendererFactory: L.svg.tile,
vectorTileLayerStyles: {
sliced: function(properties, zoom){
var cl = properties.cost_level;
if (cl === 900.0){
return {
weight: 2,
color: '#6c0370',
opacity: 1,
fill: true,
fillColor: '#ff00ff',
stroke: true,
fillOpacity: 0.1
}
} else {
return {
fillOpacity: 0,
stroke: false,
fill: false,
opacity: 0,
weight: 0
}
}
}
},
interactive: true,
getFeatureId: function(f) {
return f.properties.sid;
},
})
function handleClick_dist(e) {
var properties = e.layer.properties;
L.popup()
.setContent(
"<br><b>Area within</b>: " + properties.cost_level/60 + ' min'
)
.setLatLng(e.latlng)
.openOn(map);
clearHighlight_distance();
highlight_distance = e.layer.properties.sid;
vectorGrid_???.setFeatureStyle(highlight_distance, {
weight: 1,
color: '#ffffff',
opacity: 1,
fillColor: '',
fill: true,
fillOpacity: 0
})
L.DomEvent.stop(e);
}
var clearHighlight_distance = function() {
if (highlight_distance) {
vectorGrid_???.resetFeatureStyle(highlight_distance);
}
highlight_distance = null;
map.on('click', clearHighlight_distance);
};
vectorGrid_dist_5.on('click', handleClick_dist);
vectorGrid_dist_10.on('click', handleClick_dist);
vectorGrid_dist_15.on('click', handleClick_dist);
vectorGrid_dist_5.addTo(dist_5)
vectorGrid_dist_10.addTo(dist_10)
vectorGrid_dist_15.addTo(dist_15)
})
