AGM Freeze with a large amout of markers - Angular 8

[Joet2211]

Hi all, I'm using AGMCore / AGMMarkerClusterer / AGMSnazzyInfoWindow (tried version 1.1.0 and 3.0.0-beta). When my component start to load the map, I got a freeze of the page for several seconds (30s also) until the map is ready and working, then everything is fine. My request to the server takes some seconds, it's really fast, and the freeze happens after my component did everything and starting to draw on the maps my markers. My items in ngFor are like that:

geoCode: 
id: 1
status: "partial" 
latitude: 50.9656178
longitude: -0.1219631

That's my html:

  <agm-map [scrollwheel]="null" [styles]="styles" maxZoom="6" minZoom="2" [latitude]="startingLat" [longitude]="startingLng" [zoom]="startingZoom" (zoomChange)="onZoomChange($event)" (mapReady)="mapReady($event)">
    <agm-marker-cluster [imagePath]="'assets/img/m'" [gridSize]="20" [styles]="[{url: markerManagementString, textColor: '#fff', textSize: '15', height: '40', width: '52'}]" [minimumClusterSize]="1" (clusterClick)="onClusterClick($event)">
      <div *ngFor="let m of resultsMarkers; let i = index" ">
        <div *ngIf="m.geoCode != null">
          <agm-marker (markerClick)="onMarkerClick(m)"
                      [latitude]="m.geoCode.latitude"
                      [longitude]="m.geoCode.longitude"
                      [markerDraggable]="false"
                      [iconUrl]="{url:'assets/img/mm1.png'}">
          </agm-marker>
        </div>
      </div>
    </agm-marker-cluster>
  </agm-map>

My resultsMarkers array is usually around 28.500 items Geocode like above. What I'm doing wrong? How can I at least don't make the page freezing during the drawing on the map of all markers?

[Foreverdie]

hi,

i goth the same problem when i draw a very long polyline with a lot of points...

if i was you, i would use marker clustering : [https://angular-maps.com/api-docs/markerclusterer/directives/agmmarkercluster]()

[yohny]

it might also be caused by inserting a lot of unnecessary markup - try to remove of those <div>s you have between <agm-marker-cluster> and <agm-marker>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.