title: how to highlight a chosen line on a leaflet map?
body: <p>I want to draw a map with few routes drawn on it.</p>
  
  <p>I want to have a dropbox with numbers 1,..,n</p>
  
  <p>when an item in the dropbox is chosen, the corresponding route is highlighted on the map.</p>
  
  <p><a href="https://i.stack.imgur.com/yDNHU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yDNHU.png" alt="enter image description here"></a></p>
  
  <p>I have started using "leaflet".</p>
  
  <p>how do I highlight a line? I have used "weight" but it's more a border to a line. I would like to see the line is getting bolder.</p>
  
  <p><a href="https://i.stack.imgur.com/FpLJc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FpLJc.png" alt="enter image description here"></a></p>
  
  <p>here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.onload = loadMap();
  
  function loadMap() {
    var map = L.map('map').setView([37.8, -96], 4);
  
  
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors,&lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
      maxZoom: 18,
      id: 'mapbox.streets',
      accessToken: 'pk.eyJ1IjoiZW======V6ZTdlb2V5cyJ9.3HqHQ4BMRvSPaYe8ToA7YQ'
    }).addTo(map);
  
  
    var marker = L.marker([51.5, -0.09]).addTo(map);
  
  
    var myLines = [{
      "type": "LineString",
      "properties": {
        "id": "1"
      }
      "coordinates": [
        [-100, 40],
        [-105, 45],
        [-110, 55]
      ]
    }, {
      "type": "LineString",
      "properties": {
        "id": "2"
      }
      "coordinates": [
        [-105, 40],
        [-110, 45],
        [-115, 55]
      ]
    }];
  
    var myLayer = L.geoJson().addTo(map);
    myLayer.addData(myLines);
  
  
    geojson = L.geoJson(myLines, {
      onEachFeature: onEachFeature
    }).addTo(map);
  
  }
  
  
  
  function highlightFeature(e) {
    var layer = e.target;
  
    layer
  
    layer.setStyle({
      weight: 25,
      color: '#ff3300',
      dashArray: '',
      fillOpacity: 0.7
    });
  
    if (!L.Browser.ie &amp;&amp; !L.Browser.opera) {
      layer.bringToFront();
    }
  }
  
  function resetHighlight(e) {
    geojson.resetStyle(e.target);
  
  
    layer.setStyle({
      weight: 5,
      color: '#0000ff',
      dashArray: '',
      fillOpacity: 0.7
    });
  }
  
  
  function onEachFeature(feature, layer) {
    layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight,
      // click: zoomToFeature
    });
  }
  
  $('select[name="dropdown"]').change(function() {
  
    var item = $(this).val();
    alert("call the do something function on option " + item);
    //how to make the chosen line highlighted ??
  
  });</code></pre>
  </div>
  </div>
  </p>