JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>


<div id="container">
  <div class="loading">
    <i class="icon-spinner icon-spin icon-large"></i> Loading data from Google Spreadsheets...
  </div>
</div>

CSS

#container {
  height: 500px;
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}

JavaScript

// Read the columns into the data array
    var data = [];
    
    // Initiate the chart
    Highcharts.mapChart('container', {
      chart: {
        borderWidth: 1
      },

      colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
        'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'
      ],

      title: {
        text: 'Population density by country (/km²)'
      },

      mapNavigation: {
        enabled: true
      },

      series: [{
        data: data,
        mapData: Highcharts.maps['custom/world'],
        joinBy: ['iso-a2', 'code'],
        animation: true,
        name: 'Population density',
        states: {
          hover: {
            color: '#a4edba'
          }
        },
        tooltip: {
          valueSuffix: '/km²'
        }
      }, {
        type: 'mapbubble',
                    shadow: true,
                    minSize: 8,
                    maxSize: '5%',
        color: 'rgba(200,10,10,0.3)',
        name: 'Cities',
        data: [{
          name: 'London',
          lat: 51.507222,
          lon: -0.1275,
          z: 16
        }, {
          name: 'Birmingham',
          lat: 52.483056,
          lon: -1.893611,
          z: 5
        }, {
          name: 'Leeds',
          lat: 53.799722,
          lon: -1.549167,
          z: 2
        }]
      }]
    });