How to put marker on map using leaflet by extracting all coordinates from database?

Question

I want to extract the longitude and latitude coordinates from PostgreSQL database and display those coordinates on leaflet map.

Using this code below, I'm able to query the data from my database and print the data on browser.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8"> 
<title>Map</title>
</head>

<body onload="init()">
<h1>Map</h1>

<div>
<?php
$conn = pg_connect("host=localhost port=5432 dbname=visualization user=postgres password=*******");
$result = pg_query($conn,"SELECT lon,lat FROM pms_tunnel WHERE lon is not NULL or lat is not NULL");
echo "<table>";
while($row=pg_fetch_assoc($result)){
    echo "<tr>";
    echo "<td align='center' width='200'>" . $row['lon'] . "</td>";
    echo "<td align='center' width='200'>" . $row['lat'] . "</td>";
    echo "</tr>";
}
echo "</table>";
pg_close($conn);
?>
</div>
</body>
</html>

Using this code below, I'm able to display world map using leaflet and draw a marker on 1 longitude and latitude coordinate. Following tutorial from https://leafletjs.com/examples/quick-start/

//Map Leaflet
var mymap = L.map('mapid').setView([37.541999, 126.752747], 17);

L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
}).addTo(mymap);

var marker = L.marker([37.541999, 126.752747]).addTo(mymap);  // 1 longitude latitude coord

Now, instead of putting 1 marker from the longitude and latitude coord, I want to display all coordinates from the database on the map and put marker on each coordinate. How to do that?

Mohammed Yassine CHABLI Mohammed Yassine CHABLI · Accepted Answer · 2020-02-06T01:01:13

you can mix the php and js to do this task like the example bellow :

<?php while($row=pg_fetch_assoc($result)){ ?>

   var marker = L.marker([<?php echo $row['lon']?>,<?php echo $row['lat'] ?>]).addTo(mymap); 

<?php } ?>

How to put marker on map using leaflet by extracting all coordinates from database?

1 Answers