Region labels

The following example demostrates using of static labels to render state code on th USA map. By default labels are rendered in the center of region. You can change this behavior by using offset parameter. Label style could be customized with regionLabelStyle parameter.

Full code of an example:

$(function(){
  new jvm.Map({
    map: 'us_aea',
    container: $('#map'),
    regionLabelStyle: {
      initial: {
        fill: '#B90E32'
      },
      hover: {
        fill: 'black'
      }
    },
    labels: {
      regions: {
        render: function(code){
          var doNotShow = ['US-RI', 'US-DC', 'US-DE', 'US-MD'];

          if (doNotShow.indexOf(code) === -1) {
            return code.split('-')[1];
          }
        },
        offsets: function(code){
          return {
            'CA': [-10, 10],
            'ID': [0, 40],
            'OK': [25, 0],
            'LA': [-20, 0],
            'FL': [45, 0],
            'KY': [10, 5],
            'VA': [15, 5],
            'MI': [30, 30],
            'AK': [50, -25],
            'HI': [25, 50]
          }[code.split('-')[1]];
        }
      }
    }
  });
});