0

I am populating angular google map with more than 50k coordinates and also using marker cluster, with 10 to 15k map is a little bit slower but it was loading. I can zoom or click on the cluster to view particular marker information. in case of 50k or more, it is not at all loading entire browser tab is stuck. Please suggest any solution for loading 100k or more markers faster or any maps other than google-maps.

Using angular 5, typescript, JSON response consists of all coordinates and info (which is around 16-20mb for 50k objects), google maps running in ubuntu server.

//index.component.html
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [fitBounds]=100>
    <agm-marker-cluster [imagePath]="'https://googlemaps.github.io/js-marker-clusterer/images/m'">
        <agm-marker *ngFor="let marker of analytics_data;"
                    [latitude]="marker.latitude" 
                    [longitude]="marker.longitude"
                    [label]="marker.first_name"
                    [iconUrl]="marker.icon_url">

            <agm-info-window>
                <strong>Name:{{marker.first_name}}{{marker.last_name}}</strong><br>
                <strong>Mobile:{{marker.gender}}</strong><br>
            </agm-info-window>
        </agm-marker>
    </agm-marker-cluster>
</agm-map>

//index.component.ts
    public getAnalytics() {
        this._dataService.get(url).subscribe(data => {
            this.analytics_data = data["data"];
        });
    }

{
    "status": 200,
    "success": true,
    "data": [
        {
            "id": 1,
            "first_name": "Sachin",
            "last_name": "kumar",
            "gender": "male"
            "latitude": 26.8346004,
            "longitude": 80.9212544
        },
        {
            "id": 2,
            "first_name": "satya",
            "last_name": "kumar",
            "gender": "male",
            "latitude": 26.8009544,
            "longitude": 80.8946128
        }...
}

I expect google map should load faster, but currently it is not loading or stuck.

Magnus Melwin
  • 1,509
  • 1
  • 21
  • 32
Dhananjaya K N
  • 53
  • 1
  • 1
  • 6

2 Answers2

0

When You load a lot of objects in Google Maps, It's heavy in some low-performance computers or mobile devices. I think you would need to make some optimization in your algorithms. Only show markers in your vision. You can do it by calculating the distance between markers and your center coordinate in maps. 

var centerCoordinate = googleMaps.getCenter();

Calculate distance between 2 GPS coordinates

Magnus Melwin
  • 1,509
  • 1
  • 21
  • 32
HardCoder
  • 59
  • 1
  • 7
0

You can use agm bounds of the map.
So you need to create two arrays of markers:

markers, displayed markers.

Displayed markers are all markers that are inside the bounds of the map. Every time the bounds of the map changes, the array of displayed markers are recalculated by filtering the markers array, to leave only the ones that are in the map bounds.

Here is small example: 

<agm-map (boundsChange)="updateMarkers($event)">
 <agm-marker *ngFor="let marker of displayedMarkers" [latitude]="marker.latitude" [longitude]="marker.longitude" />
</agm-map>

markers: LatLngLiteral[];
displayedMarkers: LatLngLiteral[];

updateMarkers(newBounds: LatLngBounds) {
  this.displayedMarkers = this.markers.filter(marker => newBounds.contains(marker));
}

In my case, I have overridden the contains method.

From: contains(latLng: LatLng): boolean;
To: contains(latLng: LatLngLiteral): boolean;

Than: updateMarkers(newBounds: LatLngBounds) { this.displayedMarkers = this.markers.filter(marker =>newBounds.contains(marker.latLng)); }
Where: interface marker { latLng: LatLngLiteral; lat: number; lng: number; label?: {}; icon?: {}; controllerInfo?: {}; controllerStaus?: {}; }

If you have any questions you welcome to ask.

Misha Beskin
  • 315
  • 4
  • 9