[leaflet-markercluster] Update for v1.0 (#13901)

* Update for v1.0.2 * Changes for tslint and strictNullChecks * Make zoomToShowLayer() callback optional * Added MarkerCluster interface * refreshClusters() parameter types fix * Fixed initial broken indentation * Typo fix
2026-10-07 08:17:05 +00:00 · 2017-01-17 22:10:05 -08:00
parent 6aa60e355a
commit 8babe92264
5 changed files with 216 additions and 123 deletions
@@ -1,4 +1,4 @@
-// Type definitions for Leaflet.markercluster v0.4.0
+// Type definitions for Leaflet.markercluster 1.0
 // Project: https://github.com/Leaflet/Leaflet.markercluster
 // Definitions by: Robert Imig <https://github.com/rimig>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -6,137 +6,165 @@
 /// <reference types="leaflet" />

 declare namespace L {
+    export interface MarkerCluster extends L.Marker {
+
+        /*
+        * Recursively retrieve all child markers of this cluster.
+        */
+        getAllChildMarkers(): Marker[];
+
+        /*
+        * Returns the count of how many child markers we have.
+        */
+        getChildCount(): number;
+
+        /*
+        * Zoom to the minimum of showing all of the child markers, or the extents of this cluster.
+        */
+        zoomToBounds(): void;
+
+        /*
+        * Returns the cluster bounds.
+        */
+        getBounds(): LatLngBounds;
+    }
+
    export interface MarkerClusterGroupOptions {

-      /*
-      * When you mouse over a cluster it shows the bounds of its markers.
-      */
-      showCoverageOnHover?: boolean;
+        /*
+        * When you mouse over a cluster it shows the bounds of its markers.
+        */
+        showCoverageOnHover?: boolean;

-      /*
-      * When you click a cluster we zoom to its bounds.
-      */
-      zoomToBoundsOnClick?: boolean;
+        /*
+        * When you click a cluster we zoom to its bounds.
+        */
+        zoomToBoundsOnClick?: boolean;

-      /*
-      * When you click a cluster at the bottom zoom level we spiderfy it
-      * so you can see all of its markers.
-      */
-      spiderfyOnMaxZoom?: boolean;
+        /*
+        * When you click a cluster at the bottom zoom level we spiderfy it
+        * so you can see all of its markers.
+        */
+        spiderfyOnMaxZoom?: boolean;

-      /*
-      * Clusters and markers too far from the viewport are removed from the map
-      * for performance.
-      */
-      removeOutsideVisibleBounds?: boolean;
+        /*
+        * Clusters and markers too far from the viewport are removed from the map
+        * for performance.
+        */
+        removeOutsideVisibleBounds?: boolean;

-      /*
-      * Smoothly split / merge cluster children when zooming and spiderfying.
-      * If L.DomUtil.TRANSITION is false, this option has no effect (no animation is possible).
-      */
-      animate?: boolean;
+        /*
+        * Smoothly split / merge cluster children when zooming and spiderfying.
+        * If L.DomUtil.TRANSITION is false, this option has no effect (no animation is possible).
+        */
+        animate?: boolean;

-      /*
-      * If set to true (and animate option is also true) then adding individual markers to the
-      * MarkerClusterGroup after it has been added to the map will add the marker and animate it
-      * into the cluster. Defaults to false as this gives better performance when bulk adding markers.
-      * addLayers does not support this, only addLayer with individual Markers.
-      */
-      animateAddingMarkers?: boolean;
+        /*
+        * If set to true (and animate option is also true) then adding individual markers to the
+        * MarkerClusterGroup after it has been added to the map will add the marker and animate it
+        * into the cluster. Defaults to false as this gives better performance when bulk adding markers.
+        * addLayers does not support this, only addLayer with individual Markers.
+        */
+        animateAddingMarkers?: boolean;

-      /*
-      * If set, at this zoom level and below markers will not be clustered. This defaults to disabled.
-      */
-      disableClusteringAtZoom?: number;
+        /*
+        * If set, at this zoom level and below markers will not be clustered. This defaults to disabled.
+        */
+        disableClusteringAtZoom?: number;

-      /*
-      * The maximum radius that a cluster will cover from the central marker (in pixels). Default 80.
-      * Decreasing will make more, smaller clusters. You can also use a function that accepts
-      * the current map zoom and returns the maximum cluster radius in pixels
-      */
-      maxClusterRadius?: number | ((zoom: number) => number);
+        /*
+        * The maximum radius that a cluster will cover from the central marker (in pixels). Default 80.
+        * Decreasing will make more, smaller clusters. You can also use a function that accepts
+        * the current map zoom and returns the maximum cluster radius in pixels
+        */
+        maxClusterRadius?: number | ((zoom: number) => number);

-      /*
-      * Options to pass when creating the L.Polygon(points, options) to show the bounds of a cluster.
-      * Defaults to empty
-      */
-      polygonOptions?: PolylineOptions;
+        /*
+        * Options to pass when creating the L.Polygon(points, options) to show the bounds of a cluster.
+        * Defaults to empty
+        */
+        polygonOptions?: PolylineOptions;

-      /*
-      * If set to true, overrides the icon for all added markers to make them appear as a 1 size cluster.
-      */
-      singleMarkerMode?: boolean;
+        /*
+        * If set to true, overrides the icon for all added markers to make them appear as a 1 size cluster.
+        */
+        singleMarkerMode?: boolean;

-      /*
-      * Allows you to specify PolylineOptions to style spider legs.
-      * By default, they are { weight: 1.5, color: '#222', opacity: 0.5 }.
-      */
-      spiderLegPolylineOptions?: PolylineOptions;
+        /*
+        * Allows you to specify PolylineOptions to style spider legs.
+        * By default, they are { weight: 1.5, color: '#222', opacity: 0.5 }.
+        */
+        spiderLegPolylineOptions?: PolylineOptions;

-      /*
-      * Increase from 1 to increase the distance away from the center that spiderfied markers are placed.
-      * Use if you are using big marker icons (Default: 1).
-      */
-      spiderfyDistanceMultiplier?: number;
+        /*
+        * Increase from 1 to increase the distance away from the center that spiderfied markers are placed.
+        * Use if you are using big marker icons (Default: 1).
+        */
+        spiderfyDistanceMultiplier?: number;

-      /*
-      * Function used to create the cluster icon
-      */
-      iconCreateFunction?: any;
+        /*
+        * Function used to create the cluster icon
+        */
+        iconCreateFunction?: ((cluster: L.MarkerCluster) => L.Icon);

-      /*
-      * Boolean to split the addLayers processing in to small intervals so that the page does not freeze.
-      */
-      chunkedLoading?: boolean;
+        /*
+        * Boolean to split the addLayers processing in to small intervals so that the page does not freeze.
+        */
+        chunkedLoading?: boolean;

-      /*
-      * Time delay (in ms) between consecutive periods of processing for addLayers. Default to 50ms.
-      */
-      chunkDelay?: number;
+        /*
+        * Time delay (in ms) between consecutive periods of processing for addLayers. Default to 50ms.
+        */
+        chunkDelay?: number;
    }

-    export class MarkerClusterGroup extends FeatureGroup<ILayer> {
-      constructor();
-      constructor(options: MarkerClusterGroupOptions);
+    export interface MarkerClusterGroup extends FeatureGroup {

-      /*
-      * Bulk methods for adding and removing markers and should be favoured over the
-      * single versions when doing bulk addition/removal of markers.
-      */
-      addLayers(layers:ILayer[]):MarkerClusterGroup;
-      removeLayers(layers:ILayer[]):MarkerClusterGroup;
+        /*
+        * Bulk methods for adding and removing markers and should be favoured over the
+        * single versions when doing bulk addition/removal of markers.
+        */
+        addLayers(layers: Layer[]): this;
+        removeLayers(layers: Layer[]): this;

-      clearLayers():MarkerClusterGroup;
+        clearLayers(): this;

-      /*
-      * If you have a marker in your MarkerClusterGroup and you want to get the visible
-      * parent of it
-      */
-      getVisibleParent(marker: Marker): Marker;
+        /*
+        * If you have a marker in your MarkerClusterGroup and you want to get the visible
+        * parent of it
+        */
+        getVisibleParent(marker: Marker): Marker;

-      /*
-      * If you have customized the clusters icon to use some data from the contained markers,
-      * and later that data changes, use this method to force a refresh of the cluster icons.
-      */
-      refreshClusters():MarkerClusterGroup;
-      refreshClusters(layerGroup:LayerGroup<ILayer>):MarkerClusterGroup;
-      refreshClusters(marker: Marker):MarkerClusterGroup;
-      refreshClusters(markers: Marker[]):MarkerClusterGroup;
+        /*
+        * If you have customized the clusters icon to use some data from the contained markers,
+        * and later that data changes, use this method to force a refresh of the cluster icons.
+        */
+        refreshClusters(clusters?: Marker | Marker[] | LayerGroup | {[index: string]: Layer}): this;

-      /*
-      * Returns the total number of markers contained within that cluster.
-      */
-      getChildCount(): number;
+        /*
+        * Returns the total number of markers contained within that cluster.
+        */
+        getChildCount(): number;

-      /*
-      * Returns the array of total markers contained within that cluster.
-      */
-      getAllChildMarkers(): Marker[];
+        /*
+        * Returns the array of total markers contained within that cluster.
+        */
+        getAllChildMarkers(): Marker[];

-      /*
-      * Zooms to show the given marker (spiderfying if required),
-      * calls the callback when the marker is visible on the map.
-      */
-      zoomToShowLayer(layer: any, callback: () => void): void;
+        /*
+        * Returns true if the given layer (marker) is in the cluster.
+        */
+        hasLayer(layer: Layer): boolean;
+
+        /*
+        * Zooms to show the given marker (spiderfying if required),
+        * calls the callback when the marker is visible on the map.
+        */
+        zoomToShowLayer(layer: Layer, callback?: () => void): void;
    }
+
+    /*
+    * Create a marker cluster group, optionally given marker cluster group options.
+    */
+    export function markerClusterGroup(options?: MarkerClusterGroupOptions): MarkerClusterGroup;
 }
@@ -1,19 +1,78 @@


-var map: L.Map;
-var markerClusterGroup: L.MarkerClusterGroup;
+const polylineOptions: L.PolylineOptions = {};
+const icon: L.Icon = L.icon({ iconUrl: 'foo' });

-// CircleMarker
-var circleMarker: L.CircleMarker = new L.CircleMarker(new L.LatLng(0, 0));
+let markerClusterGroupOptions: L.MarkerClusterGroupOptions = {};
+markerClusterGroupOptions = {
+    showCoverageOnHover: true,
+    zoomToBoundsOnClick: false,
+    spiderfyOnMaxZoom: true,
+    removeOutsideVisibleBounds: false,
+    animate: true,
+    animateAddingMarkers: false,
+    disableClusteringAtZoom: 12,
+    maxClusterRadius: 40,
+    polygonOptions: polylineOptions,
+    singleMarkerMode: true,
+    spiderLegPolylineOptions: polylineOptions,
+    spiderfyDistanceMultiplier: 2,
+    iconCreateFunction: (cluster: L.MarkerCluster) => {
+        const childMarkers: L.Marker[] = cluster.getAllChildMarkers();
+        const childCount: number = cluster.getChildCount();
+        cluster.zoomToBounds();
+        const bounds: L.LatLngBounds = cluster.getBounds();
+        return icon;
+    },
+    chunkedLoading: false,
+    chunkDelay: 100
+}

-markerClusterGroup.addLayer(circleMarker);
-map.addLayer(markerClusterGroup);
-map.removeLayer(markerClusterGroup);
+let markerClusterGroup: L.MarkerClusterGroup;
+markerClusterGroup = L.markerClusterGroup();
+markerClusterGroup = L.markerClusterGroup(markerClusterGroupOptions);

-// Marker
-var marker = new L.Marker(new L.LatLng(0, 0));
+let map = L.map('foo');

-markerClusterGroup.addLayers([circleMarker, marker]);
-map.addLayer(markerClusterGroup);
-markerClusterGroup.refreshClusters();
-map.removeLayer(markerClusterGroup);
+markerClusterGroup = markerClusterGroup.addTo(map);
+map = map
+    .addLayer(markerClusterGroup)
+    .removeLayer(markerClusterGroup);
+
+const latLng: L.LatLng = L.latLng(10, 10);
+
+const layer: L.Layer = L.marker(latLng);
+const layers: L.Layer[] = [layer];
+
+let marker: L.Marker = L.marker(latLng);
+let markers: L.Marker[] = [marker];
+
+const layerGroup: L.LayerGroup = L.layerGroup(layers);
+
+marker = markerClusterGroup.getVisibleParent(marker);
+
+markerClusterGroup = markerClusterGroup
+    // Layers
+    .addLayer(layer)
+    .removeLayer(layer)
+    .addLayers(layers)
+    .removeLayers(layers)
+    .clearLayers()
+    // RefreshClusters
+    .refreshClusters()
+    .refreshClusters(layerGroup)
+    .refreshClusters(marker)
+    .refreshClusters(markers)
+    .refreshClusters(markerClusterGroup)
+    .refreshClusters({ id_any: layer });
+
+const childCount: number = markerClusterGroup.getChildCount();
+
+markers = markerClusterGroup.getAllChildMarkers();
+
+markerClusterGroup.zoomToShowLayer(marker);
+markerClusterGroup.zoomToShowLayer(marker, () => {});
+
+let hasLayer: boolean;
+hasLayer = markerClusterGroup.hasLayer(layer);
+hasLayer = markerClusterGroup.hasLayer(marker);
@@ -1,5 +1,5 @@
 {
    "dependencies": {
-        "@types/leaflet": "^0.7"
+        "@types/leaflet": "^1.0"
    }
 }
@@ -4,8 +4,11 @@
        "target": "es6",
        "noImplicitAny": true,
        "noImplicitThis": true,
-        "strictNullChecks": false,
+        "strictNullChecks": true,
        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
        "types": [],
        "noEmit": true,
        "forceConsistentCasingInFileNames": true
@@ -0,0 +1,3 @@
+{
+    "extends": "../tslint.json"
+}