javascript - LeafletJS : How to use L.Routing.itinerary in leafletjs and hover event on route?

var mymap = L.map('mapid').setView([1.369115, 103.845436], 12);
        L.tileLayer('/{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="/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<link href=".2.5/leaflet-routing-machine.css" rel="stylesheet"/>


<script src="/[email protected]/dist/leaflet.js"></script>
<script src=".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>

var mymap = L.map('mapid').setView([1.369115, 103.845436], 12);
        L.tileLayer('https://api.mapbox./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./[email protected]/dist/leaflet.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.css" rel="stylesheet"/>


<script src="https://unpkg./[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare./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/leaflet-routing-machine/api/#itineraryoptions

Please advice me.. Thank you so much

Share Improve this question edited Jun 28, 2017 at 9:11 asked May 29, 2017 at 6:21 Nay 2564 silver badges16 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3 +50

You can check Leaflet Label Plugin. Install Leaflet Label Plugin.

URL : https://github./Leaflet/Leaflet.label

Good Luck!!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - LeafletJS : How to use L.Routing.itinerary in leafletjs and hover event on route? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)