3

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?

  • Welcome to GIS SE! We're a little different from other sites; this isn't a discussion forum but a Q&A site. Please check out our short tour->gis.stackexchange.com/tour to learn about our focused Q&A format. Also when asking questions regarding code, please provide what you've tried to do so far, so we can help you from there (NOTE: 1 line of code doesn't count). – Piskr Oct 3 at 13:57
2

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)
        }
      });
    })
})
2

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
  });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.