Marker Cluster - Leaflet - Can't get it working

Question

So I am wanting to incorporate Marker Cluster into my map (obviously), however I am having a few issues. Note: I am doing this within a project and didn't write the code for the map itself, but I understand the gist of it.

We fetch the locations of the markers from a geoJSON file that is stored in the database so we just reference the SQL query which then inserts that into the map (if that makes sense).

var geojsonFeature = <?php echo $trip['json_data'] ?>;

The full code is below - minus the SQL connection/query itself since it is irrelevant to what I am trying to achieve (well at least I think it is).

                                <!-- Create a Leaflet map with the appropriate options -->
                            var map = L.map('map', {
                                layers: []
                            }).setView([-33.85638, 151.2078], 11);

                            var geojsonFeature = <?php echo $trip['json_data']  ?>;

                            function onEachFeature(feature, layer) {

                                // Is this feature a Normal point or a destination
                                if (feature.properties && feature.properties.destination) {

                                    // This feature is a destination point
                                    var popString = "<b> Destination </b> <br>";
                                    popString += feature.properties.address;
                                    layer.bindPopup(popString);

                                } else {

                                    // This feature is a normal point
                                    var popString = "<b>" + feature.properties.name + " - " + feature.properties.group +"</b><br>";
                                    popString += feature.properties.address + "<br>";
                                    popString += "<b>Pickup: </b>" + feature.properties.pick_up_time + "<br>";
                                    popString += "<b>Estimated Group Cost: </b>$" + feature.properties.group_travel_cost;                                       
                                    layer.bindPopup(popString);
                                }
                            }

                            function setStyle(feature) {

                                if (feature.properties.destination) {
                                    console.log("Destination");
                                    // Customer icon for destination
                                } else {
                                    console.log("Origin");
                                }
                            }

                        <!-- Add the GeoJSON object to the GeoJSON layer -->

                            L.geoJson(geojsonFeature, { onEachFeature: onEachFeature, 
                                                        style: setStyle }).addTo(map);


                        <!-- Set the tile layer to the openstreemap tiles + extra properties -->
                            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                                maxZoom: 18,
                                attribution: 'Map data &copy; OpenStreetMap contributors'
                            }).addTo(map);

                        <!-- Cluster Markers -->

I've tried following the docs on the MarkerCluster Git, yet I'm still lost.

var markers = L.markerClusterGroup(); markers.addLayer(L.marker(getRandomLatLng(map))); ... Add more layers ... map.addLayer(markers);

Has anyone had any experience incorporating marker clusters? And if so, can someone lend a helping hand.

Side Note: Yes I am including all the relevant files needed to run it; JS, MarkerCluster.js - I am getting all these from the CDN.

EDIT So I took the advice given by Nathan below, and the following is what has occurred now. Below is my new code.

                                    <!-- Create a Leaflet map with the appropriate options -->

                       var map = L.map('map', {
                            layers: []
                        }).setView([-33.85638, 151.2078], 11);

                        var clusterGroup = L.markerClusterGroup();
                        var geojsonFeature = <?php echo $trip['json_data']  ?>;

                        function onEachFeature(feature, layer) {

                            // Is this feature a Normal point or a destination
                            if (feature.properties && feature.properties.destination) {

                                // This feature is a destination point
                                var popString = "<b> Destination </b> <br>";
                                popString += feature.properties.address;
                                layer.bindPopup(popString);

                            } else {

                                // This feature is a normal point
                                var popString = "<b>" + feature.properties.name + " - " + feature.properties.group +"</b><br>";
                                popString += feature.properties.address + "<br>";
                                popString += "<b>Pickup: </b>" + feature.properties.pick_up_time + "<br>";
                                popString += "<b>Estimated Group Cost: </b>$" + feature.properties.group_travel_cost;                                       
                                layer.bindPopup(popString);
                            }
                        }

                        function setStyle(feature) {

                            if (feature.properties.destination) {
                                console.log("Destination");
                                // Customer icon for destination
                            } else {
                                console.log("Origin");
                            }
                        }

                    <!-- Add the GeoJSON object to the GeoJSON layer -->
                    var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle});


                    <!-- Set the tile layer to the openstreemap tiles + extra properties -->
                        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            maxZoom: 18,
                            attribution: 'Map data &copy; OpenStreetMap contributors'
                        }).addTo(map);

                    <!-- Cluster Markers -->
                    clusterGroup.addLayer(geojsonLayer);
                    map.addLayer(clusterGroup);

I added the var clusterGroup = L.markerClusterGroup(); at the start. I then replaced L.geoJson(geojsonFeature, { onEachFeature: onEachFeature, style: setStyle }).addTo(map); with var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle}); And I then add clusterGroup.addLayer(geojsonLayer); map.addLayer(clusterGroup); clusterGroup.addLayer(geojsonLayer); map.addLayer(clusterGroup); after the tileLayer (if I do it anywhere before hand, the page does a never-ending loop before crashing).

The problem is, I get the clusters, however when I zoom into them, only markers outside of smaller clusters appear. Eg; if I went into a cluster of '5', no markers in that cluster are appearing.

http://puu.sh/kQWoI/4ef5bb11fb.jpg As an example.

Answer 1

If you are getting valid GeoJSON from your query, you should be able to add it to a cluster pretty easily. A more useful example to follow might be the one in the examples directory on GitHub:

https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/geojson.html

First, you set up a markerClusterGroup:

var clusterGroup = L.markerClusterGroup();

Then you assign your geoJson layer to a named variable (but don't add it to the map):

var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle});

From there, you can add your layer to the cluster group and add that to the map:

clusterGroup.addLayer(geojsonLayer);
map.addLayer(clusterGroup);

It should be as simple as that. Also make sure that you're referencing the css files as well as the js if you want to actually see icons for those clusters.

Here is a simple example fiddle that shows it working:

http://fiddle.jshell.net/nathansnider/tw5b0uuq/