How to refresh leaflet markers after some interval

[Parvinder Singh]

I have made leaflet map with following code which uses longitude and latitude from mysql database as given below

<script>

var planes = [

['7C6Buh',37.7353,-122.3732]

<?php 

          $DB = mysqli_connect('localhost','username','password','abc');

          $Q = "SELECT length, width FROM abcstat WHERE siteid='xyz'";

          $R = mysqli_query($DB,$Q);

          //start loop

          //while or foreach

          while($row = mysqli_fetch_assoc($R)){

            echo ",['7C6Buh',{$row['length']},{$row['width']}]\r\n";

          }

          ?>

];

        var map = L.map('map').setView([19.426216, 15.7166481], 1);

        mapLink = 

            '<a href="http://openstreetmap.org">OpenStreetMap</a>';

        L.tileLayer(

            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

            attribution: '&copy; ' + mapLink + ' Contributors',

            maxZoom: 8,

            }).addTo(map);

for (var i = 0; i < planes.length; i++) {

marker = new L.marker([planes[i][1],planes[i][2]])

.bindPopup(planes[i][0])

.addTo(map);

}

               

    </script>

This load a map in div 

<div id="map" style="width: 650px; height: 400px"></div>

 and this works perfectly and shows marker points when page is loaded. But i want to refresh marker points after some time say 10 sec etc.without reloading web page.  How to do this. Thanks in advance

[k_man_au]

function updatePoints() {

 // change points

 map.invalidateSize();

 setTimeout(function(){ updatePoints(); }, 10000);

[Parvinder Singh]

Where to use this code

[k_man_au]

This will do what you want, however you will need to modify if you would like old markers to be removed from the map. You may also run into issues calling an update on load, so you may need to experiment with calling later on. Haven't tested any of the code... good luck!

<script>

  var map = L.map('map').setView([19.426216, 15.7166481], 1);

 
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> Contributors', maxZoom: 8 }).addTo(map);


  window.addEventListener("load", function() { updatePoints(); });


  function getMarkers(planes) {
    for (var i = 0; i < planes.length; i++) {

      marker = new L.marker([planes[i][1],planes[i][2]]).bindPopup(planes[i][0]).addTo(map);
    }
  }

 
 function updatePoints() {
  $.post("getplanes.php").done(function(planes){ getMarkers(planes); }});
  setTimeout(function(){ updatePoints(); }, 10000);
 }


</script>