JSFiddle - React, Tailwind, and code Playground

by bgrantdev

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/custom/us-all-territories.js"></script>
<div class="container">
    <div class="row">
        <div class="span4 offset4">
            <form method="get">
                <div class="control-group">
                    <div class="span4">
                        <select id="course_form" name="course" style="width:100%">
                            <option value="" selected="selected">Select Course</option>
                            <option value="22">Advanced Disaster Recovery Strategies for Local Communities</option>
                            <option value="27">Building Resilient Food Networks</option>
                            <option value="3">Coastal Community Resilience (AWR-228)</option>
                            <option value="10">Coastal Community Resilience - Custom (AWR-228-C)</option>
                            <option value="7">Coastal Flood Risk Reduction (PER-305)</option>
                            <option value="30">Community Model Interface for Tsunami (ComMIT)</option>
                            <option value="20">E0684:Integrating Science into Emergency Management and Policy Decisions</option>
                            <option value="16">Geographic Information Systems (GIS) for Coastal Inundation Mapping</option>
                            <option value="25">Hazardous Weather Preparedness for Campuses</option>
                            <option...

JavaScript

$(function () {
    // Initiate the chart
    $('#chart').highcharts('Map', {

        title: {
            text: 'Highmaps basic lat/lon demo'
        },

        mapNavigation: {
            enabled: true
        },

        tooltip: {
            headerFormat: '',
            pointFormat: '<b>{point.name}</b><br>{point.z} Deliveries'
        },
        legend: {
            enabled: false
        },
        series: [{
            // Use the gb-all map with no data as a basemap
            mapData: Highcharts.maps['countries/us/custom/us-all-territories'],
            name: 'Basemap',
            borderColor: '#A0A0A0',
            nullColor: 'rgba(200, 200, 200, 0.3)',
            showInLegend: false
        }, {
            name: 'Separators',
            type: 'mapline',
            data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-all-territories'],
                'mapline'),
            color: '#707070',
            showInLegend: false,
            enableMouseTracking: false
        }, {
            // Specify points using lat/lon
            type: 'mapbubble',
            name: 'Cities',
            color: Highcharts.getOptions().colors[2],
            data: [{
                'lat': 61.154862,
                    'z': 1,
                    'lon': -149.886571,
                    'name': 'Anchorage'
            }, {
                'lat': 37.353154,
                    'z': 1,
                    'lon': -120.600837,
                    'name': 'Atwater'
            }, {
                'lat': 47.30503,
                    'z': 1,
                    'lon': -122.206741,
                    'name': 'Auburn'
            }, {
                'lat': 30.403614,
                    'z': 1,
                    'lon': -97.752602,
                    'name': 'Austin'
            }, {
                'lat': 43.602311,
                    'z': 1,
                    'lon': -116.164924,
                    'name': 'Boise'
            }, {
            ...