title: LeafletJS : How to use L.Routing.itinerary in leafletjs and hover event on route?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var mymap = L.map('mapid').setView([1.369115, 103.845436], 12);
          L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxN25pNjMwMDFxMndvNzZhb2xqZmxxIn0._RFHs1Tj81KAk7u-5CJ6bA', {
              attribution: 'My Office',
              maxZoom: 18,
              id: 'mapbox',
              accessToken: 'pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxOGFsa3owMDBkMnZwZHdmeHdmdzBlIn0.jg5bQjGhfAEmFMRxLArGFQ'
          }).addTo(mymap);
          
          var carIconStart = L.icon({
          iconUrl: 'img/car-onmap.png',
          iconSize:     [40, 40], // size of the icon
          popupAnchor:  [0, -20] // point from which the popup should open relative to the iconAnchor
      });
          
          var carIconEnd = L.icon({
          iconUrl: 'img/car-onmap.png',
          iconSize:     [40, 40], // size of the icon
          popupAnchor:  [0, -20] // point from which the popup should open relative to the iconAnchor
      });
          
  
          L.marker([1.29828408457,103.789110693]).addTo(mymap).bindPopup("Start from Office");
   L.marker([1.41887924373,103.847815159]).addTo(mymap).bindPopup("End in MyHome");
              
          var control = L.Routing.control({
              waypoints: [
                  L.latLng(1.29828408457,103.789110693),
                  L.latLng(1.41887924373,103.847815159)
              ],
              lineOptions:{
                  styles: [{color: 'lightgreen', opacity: 1, weight: 5}],
                  addWaypoints:false
              },
              draggableWaypoints: false,
              createMarker: function(){ return false; },
              router: L.Routing.mapbox('pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxOGFsa3owMDBkMnZwZHdmeHdmdzBlIn0.jg5bQjGhfAEmFMRxLArGFQ'),
              
              }).addTo(mymap);
          
          L.Routing.itinerary({pointMarkerStyle: {radius: 5,color: '#03f',fillColor: 'white',opacity: 1,fillOpacity: 0.7}});
          L.Routing.errorControl(control).addTo(mymap);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.css" rel="stylesheet"/&gt;
  
  
  &lt;script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
          body { margin:0; padding:0; }
          #mapid { height:220px;}
          .leaflet-routing-container{
              display: none;
          }
      &lt;/style&gt;
      
      &lt;body&gt;
           &lt;div id="mapid"&gt;&lt;/div&gt;
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to add <strong>hover event</strong> on the route of waypoint.</p>
  
  <p>In the documentation of leaflet, to <strong>add hover event</strong> can use  L.Routing.itinerary.</p>
  
  <p><a href="http://www.liedman.net/leaflet-routing-machine/api/#itineraryoptions" rel="nofollow noreferrer">http://www.liedman.net/leaflet-routing-machine/api/#itineraryoptions</a></p>
  
  <p><a href="https://i.stack.imgur.com/5M4Gb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5M4Gb.png" alt="enter image description here"></a></p>
  
  <p>Please advice me..
  Thank you so much</p>