https://plasticoncomposites.com/jvector/src/legend.js

1/**
2 * Represents map legend.
3 * @constructor
4 * @param {Object} params Configuration parameters.
5 * @param {String} params.cssClass Additional CSS class to apply to legend element.
6 * @param {Boolean} params.vertical If <code>true</code> legend will be rendered as vertical.
7 * @param {String} params.title Legend title.
8 * @param {Function} params.labelRender Method to convert series values to legend labels.
9 */
10jvm.Legend = function(params) {
11  this.params = params || {};
12  this.map = this.params.map;
13  this.series = this.params.series;
14  this.body = jvm.$('<div/>');
15  this.body.addClass('jvectormap-legend');
16  if (this.params.cssClass) {
17    this.body.addClass(this.params.cssClass);
18  }
19
20  if (params.vertical) {
21    this.map.legendCntVertical.append( this.body );
22  } else {
23    this.map.legendCntHorizontal.append( this.body );
24  }
25
26  this.render();
27}
28
29jvm.Legend.prototype.render = function(){
30  var ticks = this.series.scale.getTicks(),
31      i,
32      inner = jvm.$('<div/>').addClass('jvectormap-legend-inner'),
33      tick,
34      sample,
35      label;
36
37  this.body.html('');
38  if (this.params.title) {
39    this.body.append(
40      jvm.$('<div/>').addClass('jvectormap-legend-title').html(this.params.title)
41    );
42  }
43  this.body.append(inner);
44
45  for (i = 0; i < ticks.length; i++) {
46    tick = jvm.$('<div/>').addClass('jvectormap-legend-tick');
47    sample = jvm.$('<div/>').addClass('jvectormap-legend-tick-sample');
48
49    switch (this.series.params.attribute) {
50      case 'fill':
51        if (jvm.isImageUrl(ticks[i].value)) {
52          sample.css('background', 'url('+ticks[i].value+')');
53        } else {
54          sample.css('background', ticks[i].value);
55        }
56        break;
57      case 'stroke':
58        sample.css('background', ticks[i].value);
59        break;
60      case 'image':
61        sample.css('background', 'url('+ticks[i].value+') no-repeat center center');
62        break;
63      case 'r':
64        jvm.$('<div/>').css({
65          'border-radius': ticks[i].value,
66          border: this.map.params.markerStyle.initial['stroke-width']+'px '+
67                  this.map.params.markerStyle.initial['stroke']+' solid',
68          width: ticks[i].value * 2 + 'px',
69          height: ticks[i].value * 2 + 'px',
70          background: this.map.params.markerStyle.initial['fill']
71        }).appendTo(sample);
72        break;
73    }
74    tick.append( sample );
75    label = ticks[i].label;
76    if (this.params.labelRender) {
77      label = this.params.labelRender(label);
78    }
79    tick.append( jvm.$('<div>'+label+' </div>').addClass('jvectormap-legend-tick-text') );
80    inner.append(tick);
81  }
82  inner.append( jvm.$('<div/>').css('clear', 'both') );
83}