CODEWITHSUNDEEP
javascriptphpleaflet
alb
alb

Reputation: 47

For each loop with JavaScript and PHP generating markers in LeafLet

I am trying to loop through my SQL result with PHP and JavaScript to set markers on a LeafLet Map. The Data contains the name, latitude, longitude and number.

Here is my code:

var ticker = <?php echo mysqli_num_rows($result); ?>;
for ( let i = 0; i < ticker; i++) {
  var latitude = <?php echo json_encode($row["latitude"]); ?>;
  var longitude = <?php echo json_encode($row["longitude"]); ?>;
  var marker = L.marker([latitude, longitude]).addTo(map);
  var popup = <?php echo json_encode($row["name"] . " " . $row["number"]); ?>;
  marker.bindPopup(popup);
}

It should add two markers, but somehow it only generates one marker with the data from the first entry.

Upvotes: 0

Views: 499

Answers (1)

alb
alb

Reputation: 47

Ok i found a solution. Thanks for any help!

PHP

$result = $conn->query($sql);
$values = [];
while($value = mysqli_fetch_array($result, MYSQLI_NUM)) {
    $values[] = $value;
}

JavaScript

var data = <?php echo json_encode($values); ?>;

for ( let i = 0; i < data.length; i++) {
    var name = data[i][0];
    var lat = data[i][1];
    var lon = data[i][2];
    var ums = data[i][3];
    var popup = name + ums;
    var marker = L.marker([lat, lon]).addTo(map);
    marker.bindPopup(popup);
}

Upvotes: 1

Related Questions