Skip to content

Updating Colors after drawing, Customized Legend

Compare
Choose a tag to compare
@markmarkoh markmarkoh released this 21 Jan 22:39
· 248 commits to master since this release

New features:

  • updateChoropleth now updates the fill colors after the map has been drawn.
  • legend can now take custom labels

Example usage for updateChoropleth:

Demo
var map = new Datamap({
  element: document.getElementById('container'),
  fills: {
    NotSnowing: 'green',
    Snowing: '#ffffff'
  },
  data: {
    CAN: {
      fillKey: 'NotSnowing'
    }
  }
});

//window.setTimeout(function() { 

  map.updateChoropleth({
    'USA': '#0fa0fa',
    'CAN': {fillKey: 'Snowing'}
  });

//}, 1000);

The above example will draw a map with Canada filled in green, then update Canada to white and fill in USA as '#0fa0fa'.

The values passed to updateChoropleth can be strings if they are a color, otherwise objects with fillKeys.

Example usage for custom labels in legend plugin

var map = new Datamap({
  element: document.getElementById("map"),
  scope: 'world',
  projection: 'mercator',
  geographyConfig: {
    highlightOnHover: false,
    popupOnHover: true
  },
  fills: {
    you: "red",
    spouse: "green",
    together: "blue",
    separately: "yellow",
    defaultFill: "#EFEFEF",
  },
  data: world
});

map.legend({
  legendTitle: "Where Have We Been",
  defaultFillName: "Whats left",
  labels: {
     you: "Fred",
     spouse: "Wilma",
     together: "Together",
     separately: "Separately",
  },
});