D3 js example that 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 function addMarkers data console log data length data length for let i 0 i data length i let longitude data i 1 10000 let latitutde data i 0 10000 console log lo longitude la latitutde var marker L circleMarker longitude latitutde marker setRadius 1 0 marker addTo map 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 D3 js example that 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 function addMarkers data console log data length data length for let i 0 i data length i let longitude data i 1 10000 let latitutde data i 0 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 lo 0 001 hacky values to align image and the data let la 0 006 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 end for k let polyline L polyline latlngs color yellow weight 1 opacity 0 5 smoothFactor 1 polyline addTo map 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
et 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 function addMarkers data console log data length data length for let i 0 i data length i let longitude data i 1 10000 let latitutde data i 0 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 lo 0 001 hacky values to align image and the data let la 0 006 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 end for k let polyline L polyline latlngs color yellow weight 1 opacity 0 5 smoothFactor 1 polyline addTo map 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