<div id="map-container">
        <div id="map">
			<div class="datamaps-hoverover" style="z-index: 10001; position: absolute; display: none;"></div>
		</div>
    </div>

  <ul class="countries-list">
    <li class="USA">USA</li>
    <li class="BRA">Brazil</li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

/**
 * Created by Sallar Kaboli <sallar.kaboli@gmail.com>
 * License: WTFL <http://www.wtfpl.net>
 * ---
 * http://sallar.me
 */
body, html{
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

/**
 * The Container
 */
#map-container{
  width: 100%;
    height: auto;
    max-width: 800px;
    max-height: 600px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -400px;
}

#map{
    width: 100%;
    height: 600px;
}

/**
 * Popup Card
 */
.popup-card{
    background-color: rgba(43, 43, 43, .9);
    border-bottom: 2px solid #2b2b2b;
    border-radius: 3px;
    padding: 15px 15px 10px;
    position: absolute;
    opacity: 0;
    width: 100px;
    margin-left: -65px;

    text-transform: uppercase;
  text-align:center;
    font-family: "Montserrat";
    font-size: 12px;
    line-height: 16px;

    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    animation: fadeUp 500ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
    animation-fill-mode: forwards;
}

/**
 * Popup Card Bottom Arrow
 */
.popup-card:after, .popup-card:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    margin-top: 2px;
}

.popup-card:after {
    border-color: transparent;
    border-top-color: #2b2b2b;
    border-width: 6px;
    left: 50%;
    margin-left: -6px;
}
.popup-card:before {
    border-color: transparent;
    border-top-color: #2b2b2b;
    border-width: 9px;
    left: 50%;
    margin-left: -9px;
}

/**
 * Popup Card Elements
 */
.popup-card span{
    display: block;
    color: #d4dbe2;
}

.popup-card span.country{
    font-size: 14px;
    margin-bottom: 8px;
    color: #fff;
}

.popup-card em{
    font-style: normal;
    display: inline-block;
    color: #a3b1bf;
    margin-right: 3px;
}

/**
 * Fade Up Animations
 */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(-80%);
    }
    100% {
        opacity: 1;
        transform: translateY(-100%);
    }
}

.countries-list  {
  display: block;
  position: relative;
  z-index: 100;
}

.countries-list li {
  curser: pointer;
  &:hover {
    color: #ed1f24;
  }
}

/**
 * Created by Sallar Kaboli <sallar.kaboli@gmail.com>
 * License: WTFL <http://www.wtfpl.net>
 * ---
 * http://sallar.me
 */
var Popup = {
	Show: function(geography, data, element, e) {
		e.stopPropagation();
		
		var el =
			'<div class="popup-card"> \
				<span class="country">' + geography.properties.name + '</span>\
        </div>';
        		
		var $el = $(el).css({
			top: e.clientY - 10,
			left: e.clientX
		});

		Popup.Hide();
			$('body').append($el);
		},

    Hide: function() {
        $('body .popup-card').remove();
    }
};

var dataMap = new Datamap({
    element         : document.getElementById('map'),
    scope           : 'world',
    projection      : 'mercator',
    geographyConfig : {
        highlightBorderColor : '#fff',
        highlightBorderWidth : 1,
        highlightFillColor   : '#f75455',
        popupOnHover         : false
    },

  fills: {
          defaultFill: '#eff0f2',
          gt: '#ed1f24'
        },
  data: {
          ASM: {fillKey: 'gt' },
          BDI: {fillKey: 'gt' },
          BEN: {fillKey: 'gt' },
          BHR: {fillKey: 'gt'},
          BOL: {fillKey: 'gt'},
          BRA: {fillKey: 'gt' },
          BFA: {fillKey: 'gt' },
          CAN: {fillKey: 'gt' },
          CHN: {fillKey: 'gt' },
          CIV: {fillKey: 'gt' },
          CMR: {fillKey: 'gt' },
          COD: {fillKey: 'gt' },
          CUB: {fillKey: 'gt' },
          DOM: {fillKey: 'gt' },
          EGY: {fillKey: 'gt' },
          ETH: {fillKey: 'gt' },
          FRA: {fillKey: 'gt' },
          DEU: {fillKey: 'gt' },
          GAB: {fillKey: 'gt' },
          GBR: {fillKey: 'gt' },
          GHA: {fillKey: 'gt' },
          GTM: {fillKey: 'gt' },
          HTI: {fillKey: 'gt' },
          HND: {fillKey: 'gt' },
          IND: {fillKey: 'gt' },
          ITA: {fillKey: 'gt' },
          JPN: {fillKey: 'gt' },
          KEN: {fillKey: 'gt' },
          KOR: {fillKey: 'gt' },
          KWT: {fillKey: 'gt' },
          LBR: {fillKey: 'gt' },
          MEX: {fillKey: 'gt' },
          MMR: {fillKey: 'gt' },
          MWI: {fillKey: 'gt' },
          NER: {fillKey: 'gt' },
          NGA: {fillKey: 'gt' },
          PAN: {fillKey: 'gt' },
          PHL: {fillKey: 'gt' },
          PRI: {fillKey: 'gt' },
          PRK: {fillKey: 'gt' },
          SDN: {fillKey: 'gt' },
          SGP: {fillKey: 'gt' },
          SLV: {fillKey: 'gt' },
          TCD: {fillKey: 'gt' },
          TGO: {fillKey: 'gt' },
          TZA: {fillKey: 'gt' },
          UGA: {fillKey: 'gt' },
          USA: {fillKey: 'gt'},
          VNM: {fillKey: 'gt' },
          ZAF: {fillKey: 'gt' },
          ZMB: {fillKey: 'gt' },
          ZWE: {fillKey: 'gt' }
         },
   
    done: function(datamap) {
        datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
            Popup.Show(geography, datamap.options.data[geography.id], this, d3.event);
        });
    }
});

$('body').on('click', function(e){
    Popup.Hide();
})
.on('click', '.datamaps-subunit,.popup-card', function(e){
    e.stopPropagation();
});