mahnunchik / markerclustererplus

MarkerClustererPlus

MarkerClustererPlus

Warning!

The following files have been deprecated and will be removed in the next release:

• src/markerclusterer.min.js
• src/markerclusterer_packed.js

Use dist/markerclusterer.min.js instead.

---

This is an enhanced version of the MarkerClusterer library for managing large amounts of markers. It adds support for several new properties as well as support for four more events. It also allows greater control over the styling of the text that appears on the cluster marker. The documentation has been significantly improved and the overall code has been simplified and polished. Very large numbers of markers can now be managed without causing Javascript timeout errors on Internet Explorer. It is backward compatible with MarkerClusterer.

This is git version of the google svn repo.

Installation

Install with npm.

$ npm install markerclustererplus --save

Install with bower.

bower install markerclustererplus --save

Additional Features

• hideLabel option - removes numbers on the clusters

Build

To rebuild a minified version of the library try the following commands:

$ npm install
$ npm run build

License

Apache License, Version 2.0

markerclustererplus's Issues

Alternatives to MarkerClustererPlus, Outdated Repo

First, I'd like to thank @mahnunchik for creating this package. It's been really useful to those of us using Marker Clusters, especially in react-google-maps.

This package hasn't been updated since: Apr 1, 2015, over 4 years ago and counting.

Are there any alternatives to MarkerClustererPlus?

Or, has anyone forked this repo to take advantage of further optimizations, etc. or any good resources where we can learn to optimize this ourself?

Thanks

Cluster click event is not triggered on full screen mobile map

When google map is rendered on full screen, on a mobile device the cluster click events don't trigger.

Re-register markerclustererplus in bower

Hi @andreychernih

What do you think about to register this repository under the canonical name markerclustererplus?

As I understand it, now it is occupied by your fork:

$ bower search markerclustererplus
Search results:
    gmaps-markerclusterer-plus git://github.com/mahnunchik/markerclustererplus.git
    markerclustererplus git://github.com/andreychernih/markerclustererplus.git

Reclustering is not called on maxZoom level

Transition to minZoom level of the map does not call reclustering immediately, but after another action with the map.

https://tomchentw.github.io/react-google-maps/#!/MarkerClusterer/1

Actions:

• Zoom to minZoom Level
  
• Zoom in
  
• Zoom out
  

Clusters will stay the same and won't recluster immediately.

Extended the concept of classes

Rather than classes referring to the various levels currently implemented, I'm needing (and I suspect there are others) to be able to manage several different types of clusters.

For example: I am creating markers that show where different diseases have been diagnosed. It would be nice if the plugin supported not just showing diseases, but several parallel classes where diseases are grouped by categories. (each with their own color set and titles)

Demo is not work

https://tomchentw.github.io/react-google-maps/#!/MarkerClusterer/1 demo map is not work. Invalid api key

[Feature request] Add support for not clustering a specific marker

It's common to have a list of places apart form the map and to let the user click one of those. When that happens we need to "uncluster" a specific marker in order to make sure it is visible on its own.

Thanks!

"main" key in package.json should point to ""dist/markerclusterer.min.js"

I tried to use the 2.1.4version via npm and webpack/typescript. The current main key points to the not existing/distributed dist/markerclusterer.js.
Are you open for pull requests?

'mouseover' does nothing on touch screen devices.

I know that mouseover implies that the user should have a mouse. However the mouseover feature for the Maps API's Marker object accounts for touch screens by allowing you to click (essentially becoming a click function). Markerclustererplus's mouseover function does nothing on touch screens, which is a bit inconvenient.

Enhancement for MarkerWithLabel

Hi guys,

I would like to extend MarkerClustererPlus to automatically aggregate values in labels (if the user chooses so and the label content is a number), instead of aggregating just the markers themselves. This functionality would extend the user's possibilities when working with MarkerWithLabel, but the normal Marker objects would not be affected.

Use case: I use one MarkerWithLabel to display the number of, for instance, visitors in one place. I don't want to use a 100 markers for one place, one is enough with a proper label. Now imagine I have N of these and they start to cluster. The cluster's default behaviour would be to show the number N, but now it could show the total number of viewers instead.
Default behaviour would remain default and for the user to start using this functionality, one more property would have to be set on the MarkerClustererPlus (for instance "aggregateLabelValues = true").

I have already done most of it locally (I just need to add the extra property to decide when the functionality kicks in) and I use it in production, it works good. If you are interested, I can make a pull request during the weekend, when I finish it.

What do you think?
@iloveitaly @mahnunchik

Using mouseover and mouseout for InfoWindow causes InfoWindow flickering and consecutive event trigger of mouseover and mouseout

I am using this library in an AngularJS project with ngMap. I attached mouseover and mouseout event to MarkerClusterer object. When mouse is hovered over the cluster I am displaying all individual marker's detail in single InfoWindow of that cluster. Whenever user's mouse is out from cluster I want to hide the InfoWindow. Now the functionality works partially correct. When the mouse is put on the count of cluster, the mouseover and mouseout events are being called consecutively, due to that the InfoWindow get visible/hide and it creates a flickering effect. Am I missing anything in my code to eliminate that flicker?

I am giving you the both examples. On is in plain JavaScript and other is in AngularJs with ngMap. Also attached the video which shows the issue I am facing.

Thanks!

ngMap + MarkerClusterPlus + InfoWindow + MouseOver + MouseOut = InfoWindow Flickering Issue
https://plnkr.co/edit/4Yl8avzyKEgtEYvffIM7?p=preview

https://www.useloom.com/share/0e183dee979e4accb90887ba3d9ba59a

Plain JavaScript + MarkerClusterPlus + InfoWindow + MouseOver + MouseOut = InfoWindow Flickering Issue
http://jsfiddle.net/2onvfwdy/89/

https://www.useloom.com/share/9927951ace714557a3e8d803c96d073f

Ability to remove marker only from cluster management

Currently when removing markers from a MarkerClusterer instance it removes the marker from cluster management and from the map. However, it is not explicitly defined in the documentation that this remove functionality will include removal from the map.

Use cases that require this flexibility include removing markers from clusters while still remaining on the map for user interactivity.

Possible to scatter/break a cluster on click?

When a user clicks on a cluster, I'd like to have them break apart and the cluster separate into individual markers rather than zooming in, which can be frustrating. Is this possible?

Custom clustering

Hi. I will ask this here because I was not able to find any information about this feature anywhere else.
Is there a way to control / customize the clustering process?

I want markers to cluster based on a custom property inserted by me, for example "isInSearchArea".
I'm displaying lots of markers on a map, and I want those that are placed inside a given searchArea to cluster together, if i zoom out. In other words, I do not want to have a cluster that has markers located within the search area alongside markers that are outside the search area.

Is this possible with the current capabilities of this library?

Require module fails because package.json points to incorrect file in dist

On line 33 in package.json. The 'main' key's value is 'dist/markercluster.js'
In the dist folder there is only markercluster.min.js.
This causes my require statement to fail to find the module.
So out of the box it doesn't work.

The work around was to change the package.json to 'dist/markercluster.min.js.'
I didn't want to bother with building the un-minified file. But I might want to though.

Anyways. Thanks for the great library!

Backward compatibility

You wrote "It is backward compatible with MarkerClusterer."
But the function redraw() is not available in MarkerClustererPlus. Its counterpart seems to be repaint().
Also other methods of the MarkerClusterer class seems to be missing in MarkerClustererPlus :

• getExtendedBounds
• getMap
• isZoomOnClick
• resetViewport
• setMap

Marker Clusterer Images

Google has moved their repository to the following URL: https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m

Changing the IMAGE_PATH will resolve clusterer icons causing 404 errors.

Style fontFamily single quote issue with TypeKit and Firefox

In the show() function, on the line that sets this.div_.innerHTML, single quotes are used to wrap the style element. This has caused issue in Firefox as the TypeKit font family is often wrapped in single quotes.

The simple fix in my project is just to change the style attribute to be wrapped in double instead of single quotes.

When map spans larger width than the width of one world map clusters no appear on duplicate map spans

When the map width becomes wider than one world map the clusters only show on one of the world maps but the pins show up on both. This is a lot easier to describe with a picture...

On the right map North and South America render the pins properly but the clusters do not.

This is by no means a typical application of a map and you are probably wondering why in the world I am doing this, I am using a map on a page as a full width "row" on a site for a nice visual effect.

The normal single point pins are shown for both but not the clusters, I am trying to track down in the code where the bounds are stopping the clusters from rendering on both maps any nudging the right direction would be a huge help.

Cheers,
Luke

Clusterer images fail to load in Cordova

Right now the protocol-relative nature of the images makes it choose "file://" as the protocol in Cordova built mobile apps.

Should it just be changed to SSL? Other than gaining a few characters to the size of the minified file, is there any downside to forcing an SSL connection to the image assets?

Currently is:

MarkerClusterer.IMAGE_PATH="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/images/m"

This would fix it for good:

MarkerClusterer.IMAGE_PATH="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/images/m"

Cluster Styles Images / Icons

I have some markers in a area and change the amount to hundreds and thousands but whatever I do only the first icons are used.
m1.png and m2.png
If I am using a custom style the same. How can I render all 5 icons?
Did I miss something?
var clusterStyles = [
{
textColor: 'black',
url: 'icons/m1.png',
height: 61,
width: 61,
textSize: 14,
fontFamily: "Drois Sans, Arial, sans-serif"
},
{
textColor: 'black',
url: 'icons/m2.png',
height: 71,
width: 71,
textSize: 14,
fontFamily: "Drois Sans, Arial, sans-serif"
},
{
textColor: 'black',
url: 'icons/m3.png',
height:87,
width: 87,
textSize: 14,
fontFamily: "Drois Sans, Arial, sans-serif"
},
{
textColor: 'black',
url: 'icons/m4.png',
height:107,
width: 107,
textSize: 14,
fontFamily: "Drois Sans, Arial, sans-serif"
},
{
textColor: 'black',
url: 'icons/m5.png',
height:149,
width: 149,
textSize: 14,
fontFamily: "Drois Sans, Arial, sans-serif"
}
];

need help

i am learning react can you guide me how to use google map react. i want to add html and css over my content plz guide me through

clarifications about this repository

I have been using MarkerClustererPlus from googlecode.com (the SVN repo) based on the recommendation of the Google Maps API article Too Many Markers!

I believe I have spotted a bug in the clusterer and I found this GH repo while Google'ing around.

I am pleased to see this code on GH, but I am curious as to why it actually exists. I have tried to determine this myself, but my findings are inconclusive. Much of the README.md is identical to the SVN version's. And though your README says "this is git version of the google svn repo" it is not exact - the diff of markerclusterer.js between the SVN and GitHub versions is 116 lines. No doubt these are improvements, but I just thought it would be good to find out a little more about this repo here on GitHub.

• What is your intent with this repo here on GitHub?
• Do you intend to keep relative parity with the SVN version? (ie. incorporate the fixes from SVN)
• Have you been in touch with Gary Little or anyone from the SVN version about this GH repo?
• Why not collaborate on one codebase? (Is it just a matter of SVN vs Git?)

IE8 https issue

Probably the wrong place post this, but couldn't work out the google repository stuff.

Had been pulling my hair out with an IE8 "mixed content" issue over https. Turns out the problems was a bug in IE8- where element with background image that are removed using removeChild trigger the "mixed content" message. Simple fix was to put this in the ClusterIcon onRemove method before the removeChild call

this.div_.style.backgroundImage = "none";

So the full method reads:

ClusterIcon.prototype.onRemove = function () {
if (this.div_ && this.div_.parentNode) {
this.hide();
google.maps.event.clearInstanceListeners(this.div_);
this.div_.style.backgroundImage = "none";
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};