Enable both function on click and highlight on hover in Leaflet+cartoDB

Question

Currently, on http://velo300.free.fr/debug,

feature highlights on 'featureOver' creating a white new feature on top of mouse-overed feature.

Problem: i need also to work with 'featureclick' for another function.

How can i manage to create this new white feature below the mouse-overed feature and not on top?

Other relevent solution: how to use setcartoCSS() wihtout redraw rhe whole layer?

Answer 1

You do realize that your tutorial for "featureOver" makes you superimpose a new layer / feature above your track. Therefore, the latter can no longer be clicked on.

You could either implement your "featureClick" listener on the added layer / feature as well, so that it opens your sidebar.

Or you could rather change the display properties of the mouse-overed track, so that it highlights by changing its color, instead of super-imposing another layer on top of it.

• GIStrator: Thank you Ghybs, you see my problem. Previously, I thought about two solutions like yours for my purpose but i don't know if they can be implemented: - Is there a way to use set.cartocss() without redraw the whole layer? ( not like this )- Or is there a way to superimpose a new feature not on top but below the mouse-overed track ?
• GIStrator: Does layer.bringToBack() can be used for overlay layer?
• ghybs: Depends on what your layer is made of. Just give it a try...
• GIStrator: layer.bringToBack() doesn't work for this geojson overlay layer

Answer 2

Solved it! Using Jquery and CartoDB SQL API:

 function onEachFeature(feature, layer) {
 layer.on({
 mouseover: function (e) {
 highlight(e.target);
 },
 mouseout: function (e) {
 dehighlight(e.target);
 },
 click: function (e) {
 select(e.target);
 }
 });
 }
 $.getJSON("https://USERNAME.carto.com/api/v2/sql?format=GEOJSON&q=SELECT * FROM TABLENAME", function(data) {
 geojson = L.geoJson(data, {
 style: style,
 onEachFeature: onEachFeature
 }).addTo(map);