github markmarkoh/datamaps v0.2.2
Updating Colors after drawing, Customized Legend

latest releases: v0.5.9, v0.5.8, v0.5.7...
10 years ago

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",
  },
});

Don't miss a new datamaps release

NewReleases is sending notifications on new releases.