update markers without refreshing page

i want to update the markers on leaflet map without refreshing the page , say every 3 seconds. the code i have tried so far is as below:

 
<body>
<div id="map"></div>

    <script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.js">
    </script>


      //<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

     <script>

    function getJSON(url) {
	 	         var resp ;
	 	         var xmlHttp ;

	 	         resp  = '' ;
	 	         xmlHttp = new XMLHttpRequest();

	 	         if(xmlHttp != null)
	 	         {
	 	             xmlHttp.open( "GET", url, false );
	 	             xmlHttp.send( null );
	 	             resp = xmlHttp.responseText;
	 	         }

	 	         return resp ;
    }

    var gjson ;
     gjson = getJSON('/final_tlc13_modified.php') ;

     function refreshData()
	 {
	     x = 5;  // 5 Seconds

	     // Do your thing here

	      gjson = getJSON('/final_tlc13_modified.php') ;

	      console.log(gjson);

	     setTimeout(refreshData, x*1000);
	 }


      refreshData(); // execute function
  
      
      

     var jsonData = JSON.parse(gjson);
     var array = [];
     var time_new=[];
     var latitude_list=[];
	 var longitude_list=[];

	 for (var i = 0; i < jsonData.length; i++) {
	     var counter = jsonData[i].sms_time;
	     //console.log(counter);
	     latitude_list.push(jsonData[i].lati_tude);
	     longitude_list.push(jsonData[i].longi_tude);
	     //var lat_lng =[jsonData[i].lati_tude,jsonData[i].longi_tude];
	     //document.write(lat_lng);
	     //time_new =lat_lng.map(Number);
	     //document.write(time_new);

	     }

   var p1 = [latitude_list[0], longitude_list[0]];
	 var p2 = [latitude_list[1], longitude_list[1]];
	 var p3 = [latitude_list[2], longitude_list[2]];
	 var p4 = [latitude_list[3], longitude_list[3]];
	 var p5 = [latitude_list[4], longitude_list[4]];



     console.log(p5);
     var planes = [p1,p2,p3,p4,p5];

        var map = L.map('map').setView(p1,14);
        mapLink =
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);

		for (var i = 0; i < planes.length; i++) {
			marker = new L.marker([planes[i][0],planes[i][1]]
			//marker = new L.marker([planes[4][0],planes[4][1]]
			)
			.addTo(map);
		}


     </script>







 </body>
</html>

<style>
	         body {
	             padding: 0;
	             margin: 0;
	         }
	         html, body, #map {
	             height: 100%;
	             width: 100%;
	         }
    </style>

<!DOCTYPE html>
 <html lang="en">

 <head>
     <title>Simple Leaflet Map</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7/leaflet.css" />
     


</head>

the json data from 'final_tlc13_modified.php' , i am getting in the format is as follows: [{"tlc":"TLC_12","sms_time":"2019-11-29 13:37:33","lati_tude":"22.213308","longi_tude":"84.870552"},{"tlc":"TLC_12","sms_time":"2019-11-29 13:40:31","lati_tude":"22.214302","longi_tude":"84.871429"},{"tlc":"TLC_12","sms_time":"2019-11-29 13:43:32","lati_tude":"22.214302","longi_tude":"84.871429"},{"tlc":"TLC_12","sms_time":"2019-11-29 13:46:33","lati_tude":"22.214302","longi_tude":"84.871429"},{"tlc":"TLC_12","sms_time":"2019-11-29 13:49:35","lati_tude":"22.214302","longi_tude":"84.871429"}]

so, how do i update the markers? on method i read was had the data been in the geojson format then it would have been simple perliedman. but then i would have to convert the json output to geojson format.

Solution

Create a function that reloads the markers. Also add the markers to a own group.

On every call the group is cleared and the markers are deleted. Then the new markers are added new to the group.


var fg = L.featureGroup().addTo(map);

fg.clearLayers();
marker = new L.marker([lat, lng]).addTo(fg)

https://jsfiddle.net/falkedesign/bw290evz/