D3 js example that animates the path along which busses drive on city map Example combines Leaflet MAP with D3 then draws Beijing bus routes style body height 600px margin 0 map height 100 leaflet container leaflet tile pane img filter grayscale 1 style script type text javascript src https d3js org d3 v7 min js script ref https notebook xbdev net index php page maps script src https unpkg com leaflet 1 7 1 dist leaflet js script link rel stylesheet href https unpkg com leaflet 1 7 1 dist leaflet css div id map div script Initialise map var map L map map L tileLayer https s tile openstreetmap org z x y png attribution copy a href https www openstreetmap org copyright OpenStreetMap a contributors addTo map map setView 40 116 9 var markers function addMarkers data console log data length data length for let i 0 i data length i let latitutde data i 0 10000 let longitude data i 1 10000 console log lo longitude la latitutde let marker L circleMarker longitude latitutde marker setRadius 1 0 marker addTo map var latlngs 38 91 77 07 37 77 79 43 39 04 85 2 var polyline L polyline latlngs color red let latlngs let la 0 006 hacky values to align image and the data let lo 0 001 let points for let k 0 k data i length k 2 la data i k 0 10000 lo data i k 1 10000 latlngs push lo la points push lo la end for k let polyline L polyline latlngs color yellow zIndex 202 weight 1 opacity 0 5 smoothFactor 1 polyline addTo map polyline setOptions zIndex 1000 markers push marker marker data points step 0 dir 1 index 0 marker setOptions zIndex 9999 function markerAnimation for let m 0 m markers length m let mark markers m mark step 0 05 if mark step 1 0 mark step 0 0 mark index mark dir if mark index mark data length 2 mark dir 1 0 if mark index 2 mark dir 1 0 if mark data length 4 return let la0 mark data mark index 0 let lo0 mark data mark index 1 let la1 mark data mark index mark dir 0 let lo1 mark data mark index mark dir 1 let la la0 la1 la0 mark step let lo lo0 lo1 lo0 mark step mark marker setLatLng la lo mark marker setStyle color red radius 0 5 weight 2 0 mark marker bringToFront setTimeout markerAnimation 1000 setInterval markerAnimation 100 Beijing bus route map About Data The first and second numbers in the data are 10000 times the latitude and longitude of the first point and the following numbers are the interpolation between the subsequent points and the first point For example the 10000 times the latitude and longitude of the first point is 1164383 401471 and the third and fourth The numbers 11 and 13 are the difference between the longitude and latitude of the second point and the longitude and latitude of the first point respectively let url https notebook xbdev net var resources lines bus json Get CSV and plot points d3 json url then function data addMarkers data console log ready script
smoothFactor 1 polyline addTo map polyline setOptions zIndex 1000 markers push marker marker data points step 0 dir 1 index 0 marker setOptions zIndex 9999 function markerAnimation for let m 0 m markers length m let mark markers m mark step 0 05 if mark step 1 0 mark step 0 0 mark index mark dir if mark index mark data length 2 mark dir 1 0 if mark index 2 mark dir 1 0 if mark data length 4 return let la0 mark data mark index 0 let lo0 mark data mark index 1 let la1 mark data mark index mark dir 0 let lo1 mark data mark index mark dir 1 let la la0 la1 la0 mark step let lo lo0 lo1 lo0 mark step mark marker setLatLng la lo mark marker setStyle color red radius 0 5 weight 2 0 mark marker bringToFront setTimeout markerAnimation 1000 setInterval markerAnimation 100 Beijing bus route map About Data The first and second numbers in the data are 10000 times the latitude and longitude of the first point and the following numbers are the interpolation between the subsequent points and the first point For example the 10000 times the latitude and longitude of the first point is 1164383 401471 and the third and fourth The numbers 11 and 13 are the difference between the longitude and latitude of the second point and the longitude and latitude of the first point respectively let url https notebook xbdev net var resources lines bus json Get CSV and plot points d3 json url then function data addMarkers data console log ready script