update markers without refreshing page
Question
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: '© ' + 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.
1 answers
solution1
0 ACCPTED 2019-11-29 08:48:11
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.