ewoken / Leaflet.MovingMarker

A Leaflet plug-in to create moving marker
MIT License
342 stars 177 forks source link

GeoJson Support #41

Open MuxTechTeam opened 3 years ago

MuxTechTeam commented 3 years ago

I am working on vehicle history. For this purpose I have to draw a rout and show moving marker on it , Its just fine and working like a charm. But when i need to show a open popup window to show speed and time of vehicle at specific time while moving marker there is a bad approach I have tried with out using Geojson with moving marker. this below code is working but very sad solution for this purpose when i have a big array of points

image movingMarkersTrip=L.Marker.movingMarker(singlePolydata[selectedID], 150000,{ autostart: false, icon: L.ExtraMarkers.icon({ icon:'fa-tachometer', markerColor: 'blue', shape: 'circle', prefix: 'fa', mapObj:map }) }).addTo(map);

            movingMarkersTrip.bindPopup('infoWindow',{maxWidth:300 ,minWidth:250}); 

            movingMarkersTrip.on('move', function (e) { 
                        updatePopUp(popupDataArray , e);   
                    });

function updatePopUp(data , e ){

    var ll = e.target.getLatLng();

    $.each(data , function(key , val) {
            // console.log(val.geometry.coordinates[0]);
            var lat1 = val.lat;
            var long1 = val.lng; 

            var lat2 = parseFloat(ll.lat).toFixed(6);
            var long2 = parseFloat(ll.lng).toFixed(6);

            var infoWindow = '';
            if(long1 == long2 || lat1 == lat2){
                // console.log('equal');

                var infoWindow = `<table class="htmlPopupDetail">    
                <tbody>         
                <tr><td><strong><?php echo lang('object');?>:</strong>
                </td><td>`+trackerName+`</td>
                </tr> 
                <tr><td><strong><?php echo lang('reportedTime');?>:</strong>
                </td><td>`+val.reportedTime+`</td>
                </tr>   
                <tr>
                <td><strong><?php echo lang('speed');?>:</strong></td>
                <td>`+val.speed+`</td>
                </tr> 
                <tr>
                <td><strong><?php echo lang('mileage');?>:</strong></td>
                <td>`+val.mileage+`</td>
                </tr>                 
                <tr><td><strong><?php echo lang('position');?>:</strong>
                </td><td><a href="https://maps.google.com/maps?q=`+lat2+`,`+long2+`&amp;t=m" target="_blank">`+lat2+` °, `+long2+` °</a>
                </td>
                </tr>   
                </tbody>
                </table>`;  

            }
            e.target._popup.setContent(infoWindow);
            e.target.openPopup();

    });
}

Now I want to know is there any way i can use geojson object with it and then oneachlayer function to bind popup with layer and show that popup when moving marker