Revision history [back]

1. Go to the MarkerCluster repository on GitHub and look for the file "leaflet.markercluster.js".
2. Download the file and rename it to "leaflet.markercluster.d.ts".
3. Open the file in a text editor.
4. Add the following code at the beginning of the file:

declare namespace L {
  /**
   * Creates a Marker Cluster Group layer that adds its child markers to a cluster
   * given the specified options.
   */
   function markerClusterGroup(options?: MarkerClusterGroupOptions): MarkerClusterGroup;

  /**
   * Options for creating a Marker Cluster Group
   */
   interface MarkerClusterGroupOptions extends LayerOptions {
      spiderfyOnMaxZoom?: boolean;
      showCoverageOnHover?: boolean;
      zoomToBoundsOnClick?: boolean;
      maxClusterRadius?: number | ((zoom: number) => number);
      polygonOptions?: PolylineOptions;
      singleMarkerMode?: boolean;
      disableClusteringAtZoom?: number;
      animateAddingMarkers?: boolean;
      removeOutsideVisibleBounds?: boolean;
      clusterPane?: string;
      chunkedLoading?: boolean;
      chunkInterval?: number;
      chunkDelay?: number;
      chunkProgress?: (processedMarkers: number, totalMarkers: number, elapsedTime: number) => void;
      iconCreateFunction?: (cluster: MarkerCluster) => Icon | DivIcon;
   }

  /**
   * Represents a group of markers displayed as a cluster.
   */
   interface MarkerCluster extends Layer {
      getAllChildMarkers(): Marker[];
      getChildCount(): number;
      getAllChildMarkers(): Marker[];
      zoomToBounds(options?: FitBoundsOptions): void;
   }
}

1. Save the file as "leaflet.markercluster.d.ts".
2. Include the definition file in your TypeScript project using the following import statement:

import 'leaflet.markercluster.d.ts';

1. You can now use the MarkerCluster plugin with TypeScript and benefit from code IntelliSense and error checking.