leaflet marker cluster icons not displaying

Question

I have a problem where the marker clusters work and show the number of items in the cluster, however the icons don't show up. When I zoom in, individual icons show, but from far away the cluster icons don't. Here's the code where I set up the data in the cluster:

    // Marker cluster
    var producerLayer = new L.MarkerClusterGroup();
    // Loop through the lp array
    for (var i=0; i < lp.length; i++) {
        var name = lp[i][0];
        var place = lp[i][1];
        var lat = lp[i][2];
        var lng = lp[i][3];
        var liscence = lp[i][4];
        var risk = lp[i][5];

        var icon = greenIcon;

        var markerLocation = new L.LatLng(lat, lng);
        var marker = new L.Marker(markerLocation,  {icon});


        var content = '<div class="info_content">' +
                '<h3>' + name + '</h3>' +
                '<p>' + place + '</p>' +
                '<p>' + 'Date of initial liscencing: ' + liscence + '</p>' +
                '<p>' + 'Risk rating: ' + risk + '</p>';

        producerLayer.addLayer(marker);
        marker.bindPopup(content).openPopup();
    }

    producerLayer.addTo(map);

I have attached an image below of the problem that I'm having.

Answer 1

Looks like you are just missing the Leaflet.markercluster plugin CSS files, as described on the plugin docs:

[…] use files in the dist folder:

• MarkerCluster.css
• MarkerCluster.Default.css (not needed if you use your own iconCreateFunction instead of the default one)
• leaflet.markercluster.js (or leaflet.markercluster-src.js for the non-minified version)

For example using unpkg.com CDN:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">