Slight redesign of Legend possible?

[xammamax]

Now the legend is displayed like this: 1-12 ▒ 13-450 ▓

Would it be possible to have this: 1-12 ┈ 13-450 ┈ ▒ ┈┈ ▓ so that the color boxes and the labels are in two rows rather than in one?

An issue with the current design is that if you limit the width in which the legend is shown (to display the legend vertically instead of horizontally) you end up with something like this: 1-12 ▒ 13-450 ▓ the color boxes are not aligned horizontally.

(A quick fix might be to swap the color boxed and the text label. i.e.: ▒ 1-12 ▓ 13-450 . That way the color boxes are always vertically aligned if you limit the width like before. It would be: ▒ 1-12 ▓ 13-450 )

Thank you for the great datamaps!

[xammamax]

I did the swap between the text-labels and the color boxes that I suggested.

This is the code I changed:

for ( var fillKey in this.options.fills ) {

  if ( fillKey === 'defaultFill') {
    if (! data.defaultFillName ) {
      continue;
    }
    label = data.defaultFillName;
  } else {
    if (data.labels && data.labels[fillKey]) {
      label = data.labels[fillKey];
    } else {

    // the following lines are changed //
label= '' + fillKey;
html += '<dd style="background-color:' +  this.options.fills[fillKey] + '">&nbsp;</dd>';
html += '<dt>' + label + '</dt>'+ '<br>';

    }
  }
}

[markmarkoh]

@xammamax, if you'd like, you can define your own plugin for the legend without having to edit the source files of Datamaps.

You can see what another user did here: http://jsbin.com/abeXErat/21/edit

You can basically copy that function addLegend2 and the 2 lines after it:

  //add the plugin to Datamaps
  map.addPlugin("mylegend", addLegend2);

  //call the plugin
  map.mylegend({legendTitle: "My Legend"});

And you use make your own markup!

I hope this helps!

[xammamax]

That is very helpful thank you!

In case someone wants to do the same this is the code I used:

  //plugin added by me to have the legend vertically
function addLegendmaxstyle(layer, data, options) {
data = data || {};
if ( !this.options.fills ) {
  return;
}

var html = '<dl>';
var label = '';
if ( data.legendTitle ) {
  html = '<h4>' + data.legendTitle + '</h4>' + html;
}

for ( var fillKey in this.options.fills ) {

  if ( fillKey === 'defaultFill') {
    if (! data.defaultFillName ) {
      continue;
    }
    label = data.defaultFillName;
  } else {
    if (data.labels && data.labels[fillKey]) {
      label = data.labels[fillKey];
    } else {

    // Changed: //
label= '' + fillKey;
html += '<dd style="background-color:' +  this.options.fills[fillKey] + '">&nbsp;</dd>';
html += '<dt>' + label + '</dt>'+ '<br>';

    }
  }
}
html += '</dl>';

var hoverover = d3.select( this.options.element ).append('div')
  .attr('class', 'datamaps-legend')
  .html(html);
}

  //Show Legend 
   map.addPlugin("mylegend", addLegendmaxstyle);
   map.mylegend({legendTitle:"Legend"})

[markmarkoh]

Excellent, thanks. I'll tag this issue as a plugin to direct users to later.

[spdaly]

THANKS!

[madrien]

This worked. However, when I add the custom labels the legend is blank. Is there something additional needed?

//Show Legend map_locations.addPlugin("mylegend", addLegendmaxstyle); map_locations.mylegend({ legendTitle:"Legend", labels: { yellow: "Campuses", blue: "Centers", darkGray: "All" },

})

Without this plugin the custom label names show with no issue.