Mfcttrf

I have a Leaflet map that I show streets and also there is an unordered list of street names in the same page with map. What I want to do is when mouse cursor hovers on a street name in the list, the poly-line which belongs to that street should be bold.

As far as I know, there is no method listed for Leaflet like that by default but there are options for poly-lines for styling and mine could be shown as below:

var polyline = L.polyline(latlngs, weight: 6).addTo(map);

How can I apply the bold styling to my poly-lines on a hover event?

There is no bold style for polylines, just weight option, which is width of polyline in pixels.

If you want to change polyline style to 'bold', you have to increase it's width, let's say from 6 to 8 pixels. You can increase it's width by declaring mouseover event catch function, where you can change width of polyline by setStyle method.

At the same time you have to save original weight to dummy mySavedWeight property (name can be any, as long as it's not in conflict with standard names), which is then used in mouseout catch function to return style to original one when mouse leaves polyline. Since there is no getStyle method for polyline, width can be saved via options property.

Code could then look something like this:

var polyline = L.polyline(latlngs, weight: 6).addTo(map);

polyline.on('mouseover', function() 
 this.mySavedWeight = this.options.weight;
 this.setStyle(
 weight: 8
 );
);

polyline.on('mouseout', function() 
 this.setStyle(
 weight: this.mySavedWeight
 );
);

You need to store the id of each street in the list to be able to make a link between the list and the map when hovering. Then use Jquery to create the hovering function and .setStyle() to change the width of the streets.

Working fiddle : https://jsfiddle.net/atsh7kv9/5/

Complete code

HTML

<div id="mapid" style="width: 50%; height: 400px;"></div>
<p>Street names</p>
<div id="list"></div>

CSS

.streetName:hover
 color:red;
 cursor:pointer

JS

var map = L.map('mapid').setView([48.21924, 16.3967], 13);

var OpenStreetMap_Mapnik = L.tileLayer('https://s.tile.openstreetmap.org/z/x/y.png', 
 maxZoom: 19,
 attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
).addTo(map);

var url = "https://openlayers.org/en/latest/examples/data/geojson/vienna-streets.geojson"

var streets;
var normalStyle = weight: 0.5, color:'red';
var boldStyle =weight: 10, color:'yellow';

$.getJSON(url,function(d)
 console.log(d)
 // adding each name in list
 for (var i in d.features)
 $("#list").append("<b class='streetName' id='"+d.features[i].id+"'>"+d.features[i].properties.name+"</b>, ")
 
 //creating layer
 streets = L.geoJSON(d)
 .setStyle(normalStyle)
 .addTo(map);

 // hovering function
 $(".streetName").mouseover(function(e)
 var id = $(this)[0].id
 streets.eachLayer(function (layer) 
 if(layer.feature.id == id) 
 layer.setStyle(boldStyle) 
 console.log(id)
 
 );
 )
 $(".streetName").mouseout(function(e)
 var id = $(this)[0].id
 streets.eachLayer(function (layer) 
 if(layer.feature.id == id) 
 layer.setStyle(normalStyle) 
 console.log(id)
 
 );
 )
)