Lat/Long Map

by Adam Nekola

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/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div id="container"></div>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

var H = Highcharts,
    map = H.maps['countries/us/us-all'],
    chart;


// Add series with state capital bubbles
//$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=us-capitals.json&callback=?', function (json) {


$.ajax({
  dataType: "jsonp",
  url: 'https://www.adamnekola.com/projects/ona-local-coors/ona-local-coors.json',
  jsonpCallback: 'callback',
  //data: data,
  success: function (json) {
    var current = [];
    var newGroups = [];
    var rebooted = [];
    var students = [];
    $.each(json, function () {
        this.z = 1; // all the same size; else this.count;
        switch (this.count){
        	case 2:
						newGroups.push(this);
            break;
        	case 3:
						rebooted.push(this);
            break;
        	case 4:
						students.push(this);
            break;
          default:
						current.push(this);
            break;
        }
    });

    chart = Highcharts.mapChart('container', {
        title: {
            text: false
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        tooltip: {
            enabled: true,
             pointFormat: '{point.city}<br>' +
                'Lat: {point.lat}<br>' +
                'Lon: {point.lon}'
        },
				/*
        xAxis: {
            crosshair: {
                zIndex: 5,
                dashStyle: 'dot',
                snap: false,
                color: 'gray'
            }
        },
        yAxis: {
            crosshair: {
                zIndex: 5,
                dashStyle: 'dot',
                snap: false,
                color: 'gray'
            }
        },*/

        series: [{
            name: 'Basemap',
            mapData: map,
            borderColor: '#cccccc',
            nullColor: 'rgba(200, 200, 200, 0.1)',
            showInLegend: false
        }, {
            name: 'Separators',
            type: 'mapline',
            data: H.geojson(map,...