Compatibility with 2.0

[MHarmony]

When leaflet 2.0 comes out, are there plans to update this module to be compatible?

[wenbei]

The 2.0 alpha release is now available: Leaflet 2.0.0-alpha
This is probably the most popular cluster plugin for leaflet, so I sincerely hope it gets updated for 2.0

[Japhys]

That exact same thought brought me here.
+1

[NealGooch]

If its of any help to anyone you can use v2 with Leaflet-V1-polyfill and you only appear to need 3 of the polyfills:

  applyDomUtilPolyfill();
  applyUtilPolyfill();
  applyFactoryMethodsPolyfill();

[KristjanESPERANTO]

Leaflet 2.x compatible fork

Since I wanted this for one of my projects, I created a fork that's compatible with Leaflet V2 without requiring any polyfills.

What's different in my fork?

Leaflet 2.x native support

• Deliberately dropped backwards compatibility with Leaflet 1.x to fully embrace modern APIs
• Migrated away from deprecated Leaflet v1 helpers (L.extend, L.bind, L.Util.isArray, etc.)
• Clean codebase using native browser APIs instead of legacy shims

Performance improvements

• New batch event layersadd for bulk operations (fires once instead of N times)
• Optimized zoom-in animation: up to 10x fewer iterations for large zoom jumps
• More efficient marker removal during animations

Modern development infrastructure

• Replaced Jake with npm scripts
• Migrated from Karma to Playwright
• GitHub Actions instead of Travis CI
• Dual build system (ES Module + IIFE) with tree-shaking support
• Replaced vendor files with npm packages

Enhanced examples and documentation

• Converted all 18 examples to modern syntax
• Improved layout and responsiveness
• Added central index.html with navigation between examples: https://kristjanesperanto.github.io/Leaflet.markercluster/

Code quality improvements

• Replaced callback patterns with Leaflet's event system
• Fixed semantic bugs (e.g., bounds parameter consistency)
• Modern ES6+ syntax throughout (like var -> const/let)

Why drop backwards compatibility?

By focusing solely on Leaflet 2.x, the codebase became:

• Cleaner: No legacy shims or compatibility layers
• Faster: Direct use of modern browser APIs
• Easier to maintain: Single target platform
• More extensible: Modern patterns enable better plugin architecture

Why didn't I create a PR?

Since I have the impression that the development of this plugin has been stalled for quite some time, and PRs would probably not be merged anytime soon, I found it easier to just focus on the fork.

I have put a lot of work into the fork and would be delighted if this could somehow flow upstream.

Feedback

I'm happy to receive feedback on the fork. However, I cannot promise support.

---

Repository: https://github.com/KristjanESPERANTO/Leaflet.markercluster

Examples: https://kristjanesperanto.github.io/Leaflet.markercluster/

[Ant4521]

Hi @KristjanESPERANTO

I’m trying to use your Leaflet 2.x compatible fork in my Angular 20 project, but I can’t make it work.

The main issue I encounter is this TypeScript / Angular compilation error:

X [ERROR] TS2305: Module '"leaflet"' has no exported member 'MarkerClusterGroup'. [plugin angular-compiler]

  5 │ import { MarkerClusterGroup } from 'leaflet';

Here are relevant parts of my setup:

package.json

"@kristjan.esperanto/leaflet.markercluster": "^2.2.0",
"@types/leaflet": "^1.9.21",
"@types/leaflet.markercluster": "^1.5.6",
"leaflet": "^2.0.0-alpha.1",

angular.json

"styles": [
   "node_modules/leaflet/dist/leaflet.css",
   "node_modules/@kristjan.esperanto/leaflet.markercluster/dist/MarkerCluster.Default.css",
   "node_modules/@kristjan.esperanto/leaflet.markercluster/dist/MarkerCluster.css"
],
"scripts": [
   "node_modules/@kristjan.esperanto/leaflet.markercluster/dist/leaflet.markercluster.js"
]

.ts

import '@kristjan.esperanto/leaflet.markercluster';
import { MarkerClusterGroup } from 'leaflet';

@Injectable()
export class MarkerClusterService {
  private mapService = inject(MapService);

  createOverlappingMarkerSpiderfier(): any {
    new MarkerClusterGroup();
  }

I tried different ways to import MarkerClusterGroup, but none of them work I always get an error at runtime or in the console.

Thanks in advance!

[KristjanESPERANTO]

Hi @Ant4521! I'm glad you're trying to use my fork 🙂

The error comes from the import path + old typings.

1. Import from the package, not from Leaflet:

   // ❌ wrong
   import { MarkerClusterGroup } from 'leaflet';
   
   // ✅ correct
   import { MarkerClusterGroup } from '@kristjan.esperanto/leaflet.markercluster';

2. Update to v3 of the fork (just released).

3. Remove the old DefinitelyTyped package:
   npm uninstall @types/leaflet.markercluster
   (Since v3 my fork ships its own types in types/index.d.ts.)

I'm not so familiar with Angular, but this should work:

import { Map, TileLayer, Marker, LatLng } from 'leaflet';
import { MarkerClusterGroup } from '@kristjan.esperanto/leaflet.markercluster';

const map = new Map('map').setView([51.505, -0.09], 13);
new TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const markers = new MarkerClusterGroup({ maxClusterRadius: 80, spiderfyOnMaxZoom: true });
markers.addLayer(new Marker(new LatLng(51.5, -0.09)));
map.addLayer(markers);

If that doesn't solve your problem or you have other questions, please open an issue in my repo. Otherwise, it will overload the issue here.

In any case, I look forward to your feedback.