JSFiddle - React, Tailwind, and code Playground

by Daniel

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/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/maps/modules/drilldown.js"></script>
        <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/mapdata/countries/us/us-fl-all.js"></script>
<div id="container"></div>

JavaScript

$(function () {

                var title = "Dot Distribution Map for TEST";
 

                (function (H) {
                    H.seriesTypes.mappoint.prototype.axisTypes = [ 'xAxis', 'yAxis', 'colorAxis'];
                    H.seriesTypes.mappoint.prototype.pointClass.prototype.setVisible = H.seriesTypes.map.prototype.pointClass.prototype.setVisible;
                    H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) {
                        p.call(this);
                        H.seriesTypes.mappoint.prototype.translateColors.call(this);
                    });
                    H.seriesTypes.mappoint.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors;
                    H.seriesTypes.mappoint.prototype.colorKey = 'value';
                    
                })(Highcharts);
                
                
                // Initiate the chart
                $('#container').highcharts('Map', {
                    title: {
                        text: title
                    },
                    mapNavigation: {
                        enabled: false,
                    },
                    colorAxis: {
                        dataClasses: [{
                                from: 0,
                                to: 3,
                                color: "#66FFFF"
                            }, {
                                from: 4,
                                to: 9,
                                color: "#0099FF"
                            }, {
                                from: 10,
                                color: "#0000FF"
                            }
                            ]
                    },
                    tooltip:
                            {
                                enabled: true,
                                pointFormat: 'Policy ID: <b>{point.name}</b><br>Latitude: <b>{point.lat}</b> <br> Longitude: <b>{point.lon}</b><br> Number of Stories:...