JSFiddle - React, Tailwind, and code Playground

HTML

<h1> Australian Meteo Stations</h1>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIkPj2I3s1QMMEqTpICCYgYCskbJ_uykc"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<script src="https://cdn.rawgit.com/pa7/heatmap.js/develop/plugins/gmaps-heatmap/gmaps-heatmap.js"></script>
<script src="https://axibase.com/atsd/atsdClient.bundle.js"></script>

<div id="heatmapArea"></div>

CSS

#heatmapArea {
    width: 630px;
    padding: 0;
    height: 400px;
    cursor: pointer;
    position: relative;
}

JavaScript

/* init atsdClient 
(client source: https://axibase.com/atsd/atsdClient.bundle.js)
*/

var atsdClient = axibase.atsdClient("https://axibase.com");

var postData = [{
    metric: "bom.gov.au.air_temp",
    entity: "*",
    endDate: "now",
    interval: {
        count: 1,
        unit: "DAY"
    },
    cache: true,
    limit: 1,
    addMeta: true,
    timeFormat: "milliseconds"
}];

var googleMapOptions = {
    zoom: 4,
    scrollwheel: true,
    draggable: true,
    scaleControl: true,
};

var heatmapOptions = {
    radius: 1,
    maxOpacity: 1,
    scaleRadius: true,
    latField: "lat",
    lngField: "lng"
}

var googleMap = new google.maps.Map(document.getElementById("heatmapArea"), googleMapOptions);
var heatmap = new HeatmapOverlay(googleMap, heatmapOptions);

/* make ajax request to /api/v1/series/query */
atsdClient.series.queries(postData)
    .then(function(response) {
        var points = getPoints(response);
        var initData = processPoints(points);
        heatmap.setData(initData);
    });

function getPoints(series) {
    return series
        .map(function(s) {
            return {
                lat: +s.meta.entity.tags.lat,
                lng: +s.meta.entity.tags.lon,
                value: s.data.length ? s.data[0].v : null
            };
        })
        .filter(function(point) {
            return point.value != null && point.lat && point.lng;
        });
}

function processPoints(points) {
    var sumLat = 0;
    var sumLng = 0;
    var minValue = Infinity;
    var maxValue = -Infinity;

    points.forEach(function(point) {
        sumLat += point.lat;
        sumLng += point.lng;
        minValue = point.value < minValue ? point.value : minValue;
        maxValue = point.value > maxValue ? point.value : maxValue;
    });

    var avgLat = sumLat / points.length;
    var avgLng = sumLng / points.length;
    var center = new google.maps.LatLng(avgLat, avgLng);

    googleMap.setCenter(center);

    return {
        min: minValue,
     ...