Geek asks and answers

MarkerClustererPlus: color and color of the set icon is size independent

I draw several hundred thousand points through MarkerClustererPlus, and I want to set cluster icon groups (colors) based on some exteral property (not based on the number of markers presented).

The only way I can do this is to create some MarkerClusterer objects and pass in another object options, but I feel I will do it with great success. Is there a better way?

Marker Clusterer Plus with differently sized icons scaled to fit.

Given the image above, I would like 139, 24, and 5 to be yellow, and 213, 25, 30, and 2 to be red; and, if possible, update their styles / options with setOptions:
mc.group[0].setOptions({"url": imgPath +lookupThreshold(severity)+ '.svg' });
mc.group[1].setOptions({"url": imgPath +lookupThreshold(severity)+ '.svg' });

P.S. - , lib, † svg :

var mcOptions = {
  "styles": [{
    "height": 19,
    "url": img/map/clusters/",
    "width": 19
  },{
    "height": 24,
    "url": img/map/clusters/",
    "width": 24
  }, {…}]
};
for ( var s = mcOptions.styles.length-1; s >= 0; s-- )
{ mcOptions.styles[s].url += lookupThreshold(severity) + '.svg'; }
// lookupThreshold switches severity and returns a string: red, orange, …

markerclusterer.js:

line 275: this.backgroundSize_ = style.backgroundSize || "contain";
line 300: style.push('background-size:' + this.backgroundSize_ + ';');

† Ffx 19.0.2, Chrome 26.x, Chrome Canary 28.x, Safari 6.0.2, IE 9.0.8 ( Opera 12.15).

. , MarkerClusterer . , , /, MC, MC.

MarkerClustererPlus 665 opt_options ( , opt_options /).

+5
1

, , MarkerClustererPlus lib:

656:  function MarkerClusterer(map, opt_markers, opt_options) {
…
665:    opt_options = opt_options || {};

665 . MarkerClusterer.prototype.extend 1539, ( ).

, (jsfiddle), ( , ):

function deepCopy(obj) {  
  this.cloneArr = function (arr) {
    var newArr = [];
    for ( var i = arr.length-1; i >= 0; i-- ) newArr[i] = this.evalObj( arr[i] );
    return newArr;
  };
  this.cloneObj = function(obj) {
    var newObj = {};
    for ( var prop in obj ) newObj[prop] = this.evalObj( obj[prop] );
    return newObj;
  };
  this.evalObj = function(obj) {
    switch ( typeof obj ) {
      case 'object':
        if ( Array.isArray( obj ) ) return this.cloneArr( obj );
        if ( obj instanceof Date === false ) return this.cloneObj( obj );
        // pass thru dates, strings, numbers, booleans, and functions
      default: return obj; // primitive
    }
  };
  return this.evalObj(obj);
}

MarkerClustererPlus.js :

656:  function MarkerClusterer(map, opt_markers, opt_optionsG) {
…
665:    var opt_options = deepCopy( opt_optionsG ) || {};

5 MarkerClustererPlus ( 5000 , 25000), MC +.

Screenshot of multiple instances of MarkerClustererPlus

+2

More articles:


All Articles