Sorry for the simple question, I can't seem to get my head around this I'm not very good with JS and json files.
I have a .json file that provides coordinates every 5 seconds of my server objects locations, I've been working on plotting the coordinates on a map using leaflet for staff access.
Currently I have used PHP to decode the json, loop through and grab all the coordinates and plot the markers on the map which works great, expect I would like to change it so we don't have to refresh the page/browser to update the markers, and instead make the markers update live when the json file changes.
This is my working code for PHP:
<?php
$count = 0;
$str = file_get_contents('coords.json');
$json = json_decode($str, true);
foreach($json['coords'] as $coords) {
$count++;
${'yCord_'.$count} = $coords['y'];
${'xCord_'.$count} = $coords['x'];
};
for ($i = 1; $i <= $count; $i++) {
echo "L.marker([" . ${'xCord_'.$i} . "," . ${'yCord_'.$i} . "], {icon: icon_door}).addTo(map);";
}
?>
After researching It seems not possible to update the website live just using PHP so I'm having to use JS. This is what I've got so far:
$.getJSON( "coords.json", function(json1) {
for (var i = 0; i < json1.coords.length; i++) {
var place = json1[i];
// Creating a marker and putting it on the map
var customIcon = L.icon({
iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
iconSize: [38, 40],
iconAnchor: [10, 40],
popupAnchor: [5, -40]
});
var marker = L.marker([place.x, place.y], {icon: customIcon});
}
});
I believe I'm not understanding how to extract certain data from the json file, every post online I've found regarding doing this has a different json file structure to mine.
My json (coords.json) file looks like this:
{
"coords": {
"1": {
"x": 21249,
"y": 7135
},
"2": {
"x": 21249,
"y": 7125
},
"3": {
"x": 21244,
"y": 7140
}
}
}
Depending on the amount of objects the json may increase/decrease the amount of coordinates following the same pattern (4,5...).
Any help is much appreciated.
EDIT - I managed to figure it out, if anyone wants my solution please see below:
$.getJSON( "coords.json", function(json1) {
for(var key in json1.coords){
var latLng = L.latLng([json1.coords[key].x, json1.coords[key].y]);
L.marker(latLng, {icon: enciv}).addTo(map);
}
});