0

How can I show data from a database to leaflet in a pop up?

Here is my code in php select command:

<?php 
$db = new PDO('mysql:host=localhost;dbname=poi', 'root', ''); 
$sql = "SELECT name,user_date,user_time,address,lat,lng,icon_name FROM tblmarker"; 

$rs = $db->query($sql); 
if (!$rs) { 
    echo "An SQL error occured.\n"; 
    exit; 
} 

$rows = array(); 
while($r = $rs->fetch(PDO::FETCH_ASSOC)) { 
    $rows[] = $r; 
    $name[] = $r['name'];
    $user_date[] = $r['user_date'];
    $user_time[] = $r['user_time'];
    $address[] = $r['address'];
    $icon_name[] = $r['icon_name'];
} 
print json_encode($rows); 
$db = NULL; 
?> 

and here is my code in showing the marker in the map from database:

function getInfo() { 
        $.getJSON("get_info.php", function (data) { 
          for (var i = 0; i < data.length; i++) { 
            var location = new L.LatLng(data[i].lat, data[i].lng); 
            var marker = new L.Marker(location,{icon:Icon1}); 
            var ll = marker.getLatLng();

          marker.bindPopup("$name<br>$user_date<br>$user_time<br>$address<br>$icon_name").addTo(map); 

             } 
        }); 
      } 

I thought it works because when I refresh it the marker from my database shows in the map but when I click the marker for the pop up the pop up shows only is like this.

$name
$user_date
...

What's wrong with my code? Am I missing something?

3

The popup is printing the text just as you have written it. Use javascript variables in marker.bindPopup, not php:

marker.bindPopup(data[i].name + "<br>" + data[i].user_date + "<br>" + data[i].user_time + "<br>" + data[i].address + "<br>" + data[i].icon_name).addTo(map); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.