JSFiddle - React, Tailwind, and code Playground

by Chris Hughes

HTML

<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/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-de-all.js"></script>

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

CSS

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

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

JavaScript

data = [];
rainfall = [];
lat = [];
lon = [];

rainfall = ['Newark', 'Test A', 'Test B'];
lat = [39.6837, 39.3447, 39.1911];
lon = [-75.7497, -75.5484, -75.5484];

data[0] = {
  name: rainfall[0],
  lat: lat[0],
  lon: lon[0]
};

data[1] = {
  name: rainfall[1],
  lat: lat[1],
  lon: lon[1]
};

data[2] = {
  name: rainfall[2],
  lat: lat[2],
  lon: lon[2]
};


// Initiate the chart
Highcharts.mapChart('container', {

  chart: {
    map: 'countries/us/us-de-all'
  },

  title: {
    text: 'Sample Map'
  },

  mapNavigation: {
    enabled: true
  },

  tooltip: {
    headerFormat: '',
    pointFormat: '<b>{point.rainfall}</b><br>Lat: {point.lat}, Lon: {point.lon}'
  },

  series: [{
    name: 'Basemap',
    borderColor: '#A0A0A0',
    nullColor: 'rgba(200, 200, 200, 0.3)',
    showInLegend: false
  }, {
    name: 'Separators',
    type: 'mapline',
    nullColor: '#707070',
    showInLegend: false,
    enableMouseTracking: false
  }, {
    // Specify points using lat/lon
    type: 'mappoint',
    name: 'Locations',
    color: Highcharts.getOptions().colors[1],
    data: data
  }]
});