.bindpopup function is not working for displaying a large amount of points onto a map (Leaflet)

Question

I am trying to make use of the bindpopup function to display more than 100 points on a map, but the function is not working as expected. The points are added without any error on the map but when it comes to adding the .bindpopup function, no map is being rendered, blank screen. The code below is when i am looping into an array to retrieve the coordinates for display and their corresponding information placed into a popup.

for($i=0;$i<sizeof($result);$i++){
                if(!empty($result[$i])){
                    foreach($result[$i] as $r){
                        $info = "";
                        foreach($r->info as $eachInfo){
                            $info .= $eachInfo . "<br/>";
                        };
                        echo "
                        var mark = L.marker([" . $r->coordinates[0]->longitude . "," . $r->coordinates[0]->latitude . "]);
                        var popup = L.popup().setContent('".$info."');
                        mark.addTo(map);
                        mark.bindPopup(popup);
                        ";
                    }

                }
            }

If i remove/comment the popup part above, i get all the points being displayed on the map, the problem occurs when there is a large number of points to be displayed (above 100 possibly) while using the .bindpopup function

Is there a solution to overcome this particular problem?

Thanks for helping

Answer 1

First off make sure the problem isn't in your PHP script by making sure error_reporting and display_errors are turned on, see:

http://php.net/manual/en/function.error-reporting.php http://php.net/manual/en/errorfunc.configuration.php#ini.display-errors

If there's no problem then you'll come to find out that the problem isn't in the amount of markers, you can easily test that by setting a static text as popup content:

var popup = L.popup().setContent('Test one two!');

You'll see that works. You'll come to find out that somewhere in one (or more) of your $info entries there's a single quote '; That will render your output javascript like this:

var popup = L.popup().setContent('OMG here's an error!');

That will fail horribly. The solution here is too escape all the single quotes in the $info strings. How you do that depends on the contents of $info entries but there is more than enough to be found on SO like here for instance:

How to escape only single quotes?

Offtopic tip:

You don't need to create a seperate popup if you're doing nothing else than setting it's contents, you can just use bindPopup on the marker object and it will do that for you:

var mark = L.marker([" . $r->coordinates[0]->longitude . "," . $r->coordinates[0]->latitude . "])
    .bindPopup('".$info."')
    .addTo(map);

Reference: http://leafletjs.com/reference.html#marker-bindpopup