How to work with the clusters on AGM-MAP (Angular 6+)

Question

I am creating a view with an AGM MAP where I want to add some markers and clusters joining them.

I have the following code:

-HTML-
    <agm-map
        class="agm-map"
        [scrollwheel]="null"
        (idle)="updateMapCenter()"
        (mapReady)="getMapInstance($event)"
        [latitude]="latCentro"
        [longitude]="lonCentro"
        [zoom]="zoom"
        (boundsChange)="checkMarkersInBounds($event)"
    >
        <agm-marker-cluster
            [imagePath]="'https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/images/m1.png?raw=true'"
            [styles]="mapOptions.styles"
            [calculator]="mapOptions.calculator"
            style="background-repeat: no-repeat"
            [maxZoom]="15"
            [minimumClusterSize]="2"
        >
            
            <agm-marker
                *ngFor="
                    let m of Locations
                "
                [markerClickable]="!isDisabled(m)"
                (markerClick)="selectMupi1(m.index)"
                [latitude]="m.lat"
                [longitude]="m.lon"
                [iconUrl]="{
                    url: m.selected
                        ? '../../../assets/img/icons/soportes/' + m.description + '_orange.png'
                        : '../../../assets/img/icons/soportes/' + m.description + '_blue.png',
                    scaledSize: { height: 50, width: 50 }
                }"
            ></agm-marker>
            
        </agm-marker-cluster>
    </agm-map>


    -TS-

SOME IMPORTS
...

Variables declarations
...

    mapOptions = {
        styles: [
            {
                height: 47,
                url: '../../../assets/img/icons/clusters/m7.png',
                width: 47,
                'line-height': 48,
                color: 'white',
                'font-size': 18
            },
            {
                height: 47,
                url: '../../../assets/img/icons/clusters/m8.png',
                width: 47,
                className: 'clusters',
                textColor: 'white',
                textSize: 14
            },
            {
                height: 59,
                url: '../../../assets/img/icons/clusters/m10.png',
                width: 60,
                'line-height': 60
            }
        ],
        calculator: (markers) => {
            let cont = 0;
            for (let i = 0; i < markers.length; i++) {
                cont = cont + 1;
            }
            if (cont < 5) {
                return { text: markers.length, index: 2 };
            } else if (cont < 12) {
                return { text: markers.length, index: 2 };
            }
            return { text: markers.length, index: 2 };
        },
        labelOptions: {
            color: 'white',
            fontFamily: '',
            fontSize: '14px',
            fontWeight: 'bold',
            text: 'Some Text'
        }
    };

ngOnInit() {}
....


    getMapInstance(map) {
        this.map = map;
    }

Now I have to update the clusters. I wanto to force the update of them and I want to know where are them and its size when I am in every zoom. I mean, I would like to precalculate the clusters and their sizes to avoid make many calculation each time I open the map. I will have like 10.000+ markers and I would like to be able to get the instance of the clusters, know where they are... Basically, how I can get the instance of the markers and the clusters from the TS as I have defined the map in the html as I have shown.

Please help.

How to work with the clusters on AGM-MAP (Angular 6+)

0 Answers0