Question

0

87

Vistas

Loop through .json file and place markers on leaflet map

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.

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-25T07:05:09.404Z

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);
   }
 });