How do I add leaflet.markercluster plugin to my code? - leaflet

Question

I’m wondering if anyone can help me.
I’m pretty new to coding and i’m trying to implement leaflets marker cluster into my site, however nothing is showing up when I add the usage from GitHub.
var BPalace = L.icon({
iconUrl: 'img/icons8-marker-50.png',
iconSize: [30, 30],
iconAnchor: [15, 30],
popupAnchor: [1, -30],
});
var marker1 = L.marker([51.5015385807725, -0.14176521957406812], {
icon: BPalace
}).bindPopup('Buckingham Palace');
var BatterseaPark = L.icon({
iconUrl: 'img/icons8-marker-50.png',
iconSize: [30, 30],
iconAnchor: [15, 30],
popupAnchor: [1, -30],
});
var marker2 = L.marker([51.478988287721876, -0.15648732182296068], {
icon: BatterseaPark
}).bindPopup('Battersea Park');
var wembley = L.icon({
iconUrl: 'img/icons8-marker-50.png',
iconSize: [30, 30],
iconAnchor: [15, 30],
popupAnchor: [1, -30],
});
var marker3 = L.marker([51.55619811605852, -0.2794567696109353], {
icon: wembley
}).bindPopup('Wembley Stadium');
var bAirport = L.icon({
iconUrl: 'img/icons8-marker-50.png',
iconSize: [30, 30],
iconAnchor: [15, 30],
popupAnchor: [1, -30],
});
var marker4 = L.marker([52.452333381857784, -1.7435316209846132], {
icon: bAirport
}).bindPopup('Birmingham Airport');
L.featureGroup([marker1, marker2, marker3, marker4])
.addTo(mymap);
var markers = L.markerClusterGroup();
markers.addLayer(L.marker(marker1(map)));
map.addLayer(markers).addTo(mymap);
Is there something I’m doing wrong? I have added the relevant files to my html page, but when i refresh nothing seems to happen.
Any help will be much appreciated.
Thank you

Answer 1

Your attempt was correct but the code not, change it to:
var markers = L.markerClusterGroup();
marker1.addTo(markers);
marker2.addTo(markers);
marker3.addTo(markers);
marker4.addTo(markers);
markers.addTo(mymap);
And remove:
L.featureGroup([marker1, marker2, marker3, marker4])
.addTo(mymap);