0

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>"); 
  }
}
| improve this question | |
  • It's suspicious that you are trying to parse a string here, instead of the JSON object returned by php. var List = JSON.parse( '<?php echo json_encode($alias) ?>' ); – Stefan Dec 27 '18 at 14:48
  • Please also share any relevant error messages that appear in the Console. – Stefan Dec 27 '18 at 14:55
  • 2
    How is List going to update on the client side? PHP only evaluates this when the page is served. I think you need to write an endpoint to fetch the data from. – Marc Pfister Dec 27 '18 at 15:44
  • php header refresh > stackoverflow.com/questions/12383371/refresh-a-page-using-php – Mapperz♦ Dec 27 '18 at 16:46
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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.