• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

146
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.

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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);
   }
 });
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda