Dispalying Edges information when mouseover leaflet map?

Question

I have already (receive) an html page with leaflet map. I would like to display edges (links) informations when mouse over(or hover?). I can get the data from html-javascript via the following command `Roads.toGeoJSON().features

Roads.eachLayer(function (layer) {
            layer.on({
              'mouseout': function(){
                  layer.setStyle({fillColor: colorscale(mydata.speed)})
            },
              'mouseover': layer.bindPopup(layer.feature.properties.edge_id)
          })
        });

where Roads equal to geo_json_118de89d5f914e07964f4fe5889a9bb6 which is defined as

var geo_json_118de89d5f914e07964f4fe5889a9bb6 = L.geoJson(null, {
                smoothFactor: 1,
                onEachFeature: geo_json_118de89d5f914e07964f4fe5889a9bb6_onEachFeature,
            
                style: geo_json_118de89d5f914e07964f4fe5889a9bb6_styler,
        });

For better understanding here is an example of the html file https://jsfiddle.net/5ptfuqk9/

Answer 1

The L.Tooltip is very helpful for this case. By default it is only displaying on mouseover. Doku

geo_json_6e3c60c8b0b046c1a06eb56942730a3a.eachLayer(function (layer) {
            layer.bindTooltip("Id "+layer.feature.properties.edge_id)
        });

https://jsfiddle.net/falkedesign/7esauf9q/