JSFiddle - React, Tailwind, and code Playground

by Gary Stubbenhagen

HTML

<script src="http://www.ammap.com/lib/3/ammap.js"></script>
<script src="http://www.ammap.com/lib/3/maps/js/worldLow.js"></script>
<script src="//www.amcharts.com/lib/3/maps/js/worldHigh.js"></script>
<h1></h1>
<div id="mapdiv" style="width: 100%; min-height: 370px;"></div>

JavaScript

AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.ammap.com/lib/3/images/";
    //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
    map.balloon.color = "#000000";
    map.dragMap = false;
    map.panEventsEnabled = false;
    map.zoomControl.zoomControlEnabled = false;
    map.zoomControl.panControlEnabled = false;
    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        getAreasFromMap: true,
        areas: [{
            id: 'AF',
            groupId: 'AFN',
            color: '#9e9e9e',
            selectable: false            
        },{
            id: 'AL',
            groupId: 'ALL',
            color: '#9e9e9e',
            selectable: false 
        },{
            id: 'DZ',
            groupId: 'DZD',
            color: '#9e9e9e',
            selectable: false 
        },{
            id: 'AS',
            groupId: 'USD'
        },{
            id: 'AD',
            groupId: 'EUR'
        },{
            id: 'AO',
            groupId: 'AOA',
            color: '#9e9e9e',
            selectable: false 
        },{
            id: 'AI',
            groupId: 'XCD',
        },{
            id: 'AG',
            groupId: 'XCD'
        },{
            id: 'AR',
            groupId: 'ARS',
            color: '#9e9e9e',
            selectable: false 
        },{
            id: 'AM',
            groupId: 'AMD',
            color: '#9e9e9e',
            selectable: false 
        },{
            id: 'AW',
            groupId: 'AWG',
            color: '#9e9e9e',
            selectable: false 
        },{
            id: 'AU',
            groupId: 'AUD'
        },{
            id: 'AT',
            groupId: 'EUR'
        },{
            id: 'AZ',
            groupId: 'AZN',
            color: '#9e9e9e',
            selectable: false 
        },{
            id: 'BS',
            groupId: 'BSD',
            color: '#9e9e9e',
            selectable: false 
...