Leaflet with markercluster and typescript

Question

I have problem with markercluster and leaflet in typescript so I'm trying to recreate that issue in stackblitz but with no success. Here is my code: https://stackblitz.com/edit/ts-leaflet-markercluster?file=index.ts

As You can see no markers are shown and no errors thrown.

Can anyone help?

Answer 1

You should place your markers inside an array and then use the following code:

const addressPoints = [
  [POLSKA_SZER_GEOGR, POLSKA_DL_GEOGR, '1'],
  [POLSKA_SZER_GEOGR+1, POLSKA_DL_GEOGR+1, '1']
]

const markers = L.markerClusterGroup();

for (var i = 0; i < addressPoints.length; i++) {
  var a = addressPoints[i];
  var title = a[2];
  var marker = L.marker(new L.LatLng(a[0], a[1]), {
    title: title,
    icon: markerIcon
  });
  marker.bindPopup(title);
  markers.addLayer(marker);
}

map.addLayer(markers);

Also make sure you import the marker icon as an L.icon because of the use of a bundler like webpack (check live demo).

Demo