Automatically refresh Leaflet Markers from MySQL

Question

I have a leaflet map that loads marker details from a MySQL database. I have a timer that clears and reloads the layers (and therefore markers); however; it doesn't seem to be refreshing the data. Code below:

var map = L.map('map').setView([52.474751, 1.753640], 08);
L.tileLayer( 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZmVybmNvbSIsImEiOiJjam96dHY0Y2Myb3liM3FwYWgyM2xhdXN6In0.aiq5NoW5QMJSc0JUrlz_tA', {
  maxZoom: 20,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org/"> OpenStreetMap </a> contributors, ' +
    '<a href="http://creativecommons.org/"> CC-BY-SA </a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'examples.map-i875mjb7'
}).addTo(map);

var fernicons = L.Icon.extend({
  options: {
    iconSize:     [20, 20],
    iconAnchor:   [10, 10],
    popupAnchor:  [0, 0]
  }
});

var aisicon = new fernicons({iconUrl: 'js/images/ais.png'}),
  radioicon = new fernicons({iconUrl: 'js/images/radio.png'});

var markerGroup = L.layerGroup().addTo(map), markerGroup2 = L.layerGroup().addTo(map);  
$( document ).ready(function() {
  addData();
  addRadio();   
  timer();
});

function timer() {
  setInterval(function(){   
    map.removeLayer(markerGroup);
    addData();
    map.removeLayer(markerGroup2);
    addRadio();
  }, 5000)};

function addData() {
  <?php  $alias = $conn->getList();  ?>
  var List = JSON.parse( '<?php echo json_encode($alias) ?>' );
  markerGroup = L.layerGroup().addTo(map);

  for(var i=0; i<List.length; i++) {
    marker = L.marker( [List[i]['lat'], List[i]['lng']], {icon: aisicon}).addTo(markerGroup);
    marker.bindPopup( "<b>" + List[i]['alias']+"</b><br>MMSI:" + List[i]['ident'] + "<br>";
  }
}

function addRadio() {
  <?php  $alias = $conn->getOnline();  ?>
  var List = JSON.parse( '<?php echo json_encode($alias) ?>' );
  markerGroup2 = L.layerGroup().addTo(map);
  for(var i=0; i<List.length; i++) {
    marker = L.marker( [List[i]['lat'], List[i]['lng']]).addTo(markerGroup2);
    marker.bindPopup( "<b>" + List[i]['alias']+"</b><br>Radio ID:" + List[i]['ident']+ "<br><a href='./edit.php?ident="+ List[i]['ident']+"'target='_blank'>Edit Radio</a>"); 
  }
}

Answer 1

var List = JSON.parse( '<?php echo json_encode($alias) ?>' );

This won't update when the timer fires - PHP only evaluates this once when then page is served.

You probably want to write an endpoint that serves the latest data. This could be geojson (basic example) and you could use L.GeoJson.Ajax. Or you can serve your own format which you parse and create markers.