JSFiddle - React, Tailwind, and code Playground
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'
}, {
...