googlearchive / js-marker-clusterer

A marker clustering library for the Google Maps JavaScript API v3.
https://googlemaps.github.io/js-marker-clusterer/docs/reference.html
Apache License 2.0
1.28k stars 775 forks source link

Styling clusters #123

Open ivanproskuryakov opened 7 years ago

ivanproskuryakov commented 7 years ago

Clusters are missing classes which makes impossible to operate(work) with them, like change the opacity of all clusters.

It can be solved by adding class variable programmatically on tilesloaded gmaps event, but there are cases when this is not working properly for this "js-marker-clusterer". So I will much better to have separate events clusteringbegin &clusteringend, similar to: https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/src/markerclusterer.js#L1491 & https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/src/markerclusterer.js#L1536

along with class attribute for a marker

Remo commented 7 years ago

@ivanproskuryakov do you mind creating this PR against our fork at https://github.com/gmaps-marker-clusterer/gmaps-marker-clusterer? This repo isn't maintained anymore. Could you also elaborate what problems we get without clusteringbegin and clusteringend?

ivanproskuryakov commented 7 years ago

@Remo

do you mind creating this PR against our fork at https://github.com/gmaps-marker-clusterer/gmaps-marker-clusterer? Sure, will do that

Could you also elaborate what problems we get without clusteringbegin and clusteringend?

This will give possibility to handle events for visible set of clusters only, ex: better performance

// Adding preloading for visible clusters 
    MapPropertyCollection.prototype.bindClusterEvents = function () {
        var _this = this;

        google.maps.event.addListener(this.cluster, 'clusteringend', function () {
            _this.preloadPreviews();
        });
    };

// And later, show cached image on mouse over
    google.maps.event.addListener(marker, 'mouseover', function () {
         infoWindow.open(_this.map, this);
         _this.showPreview(marker);
    });