FancyGrid - Europe Map

by Mikhail Tatsky

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link href="https://code.fancygrid.com/fancy.min.css" rel="stylesheet">
<script src="https://code.fancygrid.com/fancy.full.min.js"></script>

<div id="container"></div>

CSS

.fancy-theme-gray .fancy-grid .fancy-grid-cell {
  border-bottom-color: transparent;
}

.fancy-theme-gray .fancy-grid-cell.data {
  cursor: pointer;
}

.fancy-theme-gray .data .fancy-grid-cell-inner {
  cursor: pointer;
}

.fancy-theme-gray .fancy-grid-cell-inner {
  margin-top: 17px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #626262;
}

JavaScript

var gridMapData = [
  ['ISL', '   ', '   ', 'NOR', 'SWE', 'FIN', '   ', '   ', '   ', '   '],
  ['   ', '   ', '   ', '   ', 'DNK', '   ', 'EST', '   ', '   ', '   '],
  ['IRL', 'GBR', '   ', 'NLD', 'DEU', 'POL', 'LTU', 'LVA', '   ', '   '],
  ['   ', '   ', '   ', 'BEL', 'CHE', 'CZE', 'BLR', 'RUS', '   ', '   '],
  ['   ', '   ', 'FRA', 'LUX', 'AUT', 'SVK', 'HGR', 'UKR', '   ', '   '],
  ['PRT', 'ESP', '   ', 'ITA', 'SLO', 'HRV', 'ROU', '   ', 'GEO', 'AZE'],
  ['   ', '   ', '   ', '   ', '   ', 'SRB', 'BGR', 'TUR', 'ARM', '   '],
  ['   ', '   ', 'MLT', '   ', '   ', 'GRC', '   ', 'CYP', '   ', '   ']
];

var COLORS = [
  '103, 232, 99',
  '135, 207, 233',
  '233, 135, 207',
  '255, 241, 118'
];

var REGIONS = [
  'Eastern Europe',
  'Northern Europe',
  'Western Europe',
  'Southern Europe'
];

var mapInfo = {

  EST: {
    group: 0,
    name: 'Estonia',
    capital: 'Tallinn'
  },
  POL: {
    group: 0,
    name: 'Poland',
    capital: 'Warsaw'
  },
  LTU: {
    group: 0,
    name: 'Lithuania',
    capital: 'Vilnius'
  },
  LTU: {
    group: 0,
    name: 'Latvia',
    capital: 'Riga'
  },
  LVA: {
    group: 0,
    name: 'Latvia',
    capital: 'Riga'
  },
  BLR: {
    group: 0,
    name: 'Belarus',
    capital: 'Minsk'
  },
  RUS: {
    group: 0,
    name: 'Russia',
    capital: 'Moscow'
  },
  UKR: {
    group: 0,
    name: 'Ukraine',
    capital: 'Kiev'
  },
  CZE: {
    group: 0,
    name: 'Czech Republic',
    capital: 'Praga'
  },
  CZE: {
    group: 0,
    name: 'Czech Republic',
    capital: 'Praga'
  },
  HGR: {
    group: 0,
    name: 'Hungary',
    capital: 'Budapest'
  },
  HGR: {
    group: 0,
    name: 'Hungary',
    capital: 'Budapest'
  },
  SLO: {
    group: 0,
    name: 'Slovenia',
    capital: 'Ljubljana'
  },
  SVK: {
    group: 0,
    name: 'Slovakia',
    capital: 'Bratislava'
  },
  HRV: {
    group: 0,
    name: 'Croatia',
    capital: 'Zagreb'
  },
  SRB: {
    group: 0,
    name: 'Serbia',
    capital: 'Belgrade'
  },
  BGR: {
   ...