Loop While and Foreach (PHP & JS) problem

Asked

Viewed 56 times

-1

I have two values from two different columns in the database: Column: Laitude, Longitude.I have stored values within each column of the table: Location. I want to list all the values of Latitude and logintude. so to show this geolocation, I need to use javascript. So I created JS variables to store php data inside javascript. so now I don’t know how to create a loop and show all the values. The way I tried to do it only returns one row of the column: Latitude and Longintude. I want to return all the rows.

<?php foreach($Zone as $Zones){?>

<script>


        var ZoneLogitude  = <?=$Zones["Longitude"]?>;
        var ZoneLatitude  = <?=$Zones["Latitude"]?>;


        var marker        = L.marker([Latitude, Longitude]).addTo(mymap);
        var quarter       = L.circle([ZoneLatitude, ZoneLogitude], {

          color: 'yellow',
          fillColor: 'yellow',
          fillOpacity: 0.5,
          radius: 900
          }).addTo(mymap);

          L.tileLayer('https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}.png?access-token=A1r6TvsYKBMdJu6fyH3rpZKdqrb8Kv8O6iiAsLQR2GHAmyxTL1Uk1vpV5dpCURZV', {}).addTo(mymap);
        mymap.attributionControl.addAttribution("<a href=\"https://www.jawg.io\" target=\"_blank\">&copy; Jawg</a> - <a href=\"https://www.openstreetmap.org\" target=\"_blank\">&copy; OpenStreetMap</a>&nbsp;contributors")
</script>
<?php }?>

If anyone can help me, I’d appreciate it!

1 answer

1


Always complicated to mix two languages server-side and client-side, I assume that none of them should interfere with each other. From this principle, we can arrive at this code:

<script>
// Se puder usar um ajax que uma rota GET para trazer esta informação via clientSide será melhor
// var zones = $.get('zones.php'); -> deve retornar um JSON.
var zones = <?php echo json_encode($Zone); ?>

// para sintaxe de repetição 'foreach' normalmente parte do plural para singular 
// no PHP foreach($zones as $zone)
// no Javascript for(var zone in zones)
for (var zone in zones) {

  var marker = L.marker([Latitude, Longitude]).addTo(mymap);
  var quarter = L.circle([zones[zone].ZoneLatitude, zones[zone].ZoneLogitude], {
    color: "yellow",
    fillColor: "yellow",
    fillOpacity: 0.5,
    radius: 900
  }).addTo(mymap);

  L.tileLayer(
    "https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}.png?access-token=A1r6TvsYKBMdJu6fyH3rpZKdqrb8Kv8O6iiAsLQR2GHAmyxTL1Uk1vpV5dpCURZV",
    {}
  ).addTo(mymap);

  mymap.attributionControl.addAttribution(
    '<a href="https://www.jawg.io" target="_blank">&copy; Jawg</a> - <a href="https://www.openstreetmap.org" target="_blank">&copy; OpenStreetMap</a>&nbsp;contributors'
  );

}
</script>

Good luck!

  • thank you for having responded. I did a test playing a console.log to see what it returns to me. and yes, it returned all the values in the log console, but in the map it only returns one. if I take var mymap = L.map('mapid'). setView([Latitude, Longitude], 14); which represents the current location, it returns to me all the values in the console, but if I put it back only returns one value instead of the three values which is the total of the values that need to return

  • 1

    Two things can be done: 1) try to add two cards on the map to see the possibility of this being done; 2) maybe the problem is the map lib you are using, look in the documentation for a help to add multiple markers. I hope you helped, if you need help, open another question regarding this problem. Don’t forget to close the question and evaluate the answer.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.