Menu
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);<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.js"></script>
<style>
body { margin:0; padding:0; }
#mapid { height:220px;}
.leaflet-routing-container{
display: none;
}
</style>
<body>
<div id="mapid"></div>
</body>I would like to add hover event on the route of waypoint.
In the documentation of leaflet, to add hover event can use L.Routing.itinerary.
http://www.liedman.net/leaflet-routing-machine/api/#itineraryoptions
Please advice me.. Thank you so much
331
You can check Leaflet Label Plugin. Install Leaflet Label Plugin.
URL : https://github.com/Leaflet/Leaflet.label
Good Luck!!
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
