CODEWITHSUNDEEP
javascriptalgorithmgoogle-mapsoptimizationgoogle-maps-api-3
Wild Goat
Wild Goat

Reputation: 3579

Optimization for map data

I have large amount of markers I want to display based on user viewpoint. I am looking for most efficient way I can quickly update my map when user changes a viewpoint. In other words display only these markers which falls into bounds (lg, ln).

Currently my solution is following:

  1. On page load pull all data about all places from server and store it in array.
  2. Update map
  3. Every time user drags map remove old markers and place new which falls into bound

Current solutions works but slow and inefficient, to complexity to refresh a map O(N*M) where N old markers which needs to be removed and M new markers which needs to be placed on the map.

I wonder if someone has idea how to make it as faster than this?

How about detecting only the markers which needs to be updated (removed/added)?

I am generally looking for any optimization suggestions - that might be algorithmic improvement, technology or architectural (processing on backend?).

Current code:

var places = function(){} // Some function that pulls a lot of places on page load

function updatePlaces(places){

    google.maps.Map.prototype.clearMarkers();
    if(places != null){
        for(var i = 0; i < places.length; i++){

            var lat = places[i].lat;
            var lng = places[i].lng;
            var position = new google.maps.LatLng(lat, lng);

            if(map.getBounds().contains(position) && placedMarkers < markerLimitNumber) {
                var marker = new MarkerWithLabel({
                    position: position,
                    draggable: false,
                    raiseOnDrag: true,
                    map: map,
                    labelContent: '',
                    labelAnchor: new google.maps.Point(-10, 15),
                    labelClass: "labels", // the CSS class for the label
                    labelStyle: {opacity: 1.0},
                    icon: 'images/markers/grey_circle_small.png'
                });

                marker.addListener('click', function(){});
                markers.push(marker);
                placedMarkers = placedMarkers + 1;
            }
        }
    }
}

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < markers.length; i++){
        markers[i].setMap(null);
    }
    markers = new Array();
    placedMarkers = 0;
};

Upvotes: 0

Views: 122

Answers (2)

Anatolii Suhanov
Anatolii Suhanov

Reputation: 2682

Here is a good article on this

https://www.mapbox.com/blog/supercluster/?utm_source=newsletter_april&utm_medium=email&utm_content=supercluster&utm_campaign=newsletter_april

Please take a look

Upvotes: 1

Joyson
Joyson

Reputation: 3040

You could try using Google Map Marker Clusterer. It hides the markers at low zoom levels and displays them at higher zoom levels and allows addition of a large number of markers.

Upvotes: 1

Related Questions