Mapline with LatLon and arrow

@authors: Lars Cabrera Sebastian Bochan

by Alagar Kamuthurai

HTML

<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 {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

$(function() {

    // Function to return a path with an arrow between two points
    function pointsToPath(from, to) {
        var arrowLength = 30,
            arrowWidth = 20,
            path = ['M', from.x, from.y, 'L', to.x, to.y];

        var lastPoint = to,
            nextLastPoint = from,
            angle = Math.atan((lastPoint.x - nextLastPoint.x) /
                (lastPoint.y - nextLastPoint.y));

        if (angle < 0) angle = Math.PI + angle;

        path.push('M', lastPoint.x, lastPoint.y);

        if (lastPoint.x > nextLastPoint.x) {
            path.push(
                'L',
                lastPoint.x + arrowWidth * Math.cos(angle),
                lastPoint.y - arrowWidth * Math.sin(angle)
            );
            path.push(
                lastPoint.x + arrowLength * Math.sin(angle),
                lastPoint.y + arrowLength * Math.cos(angle)
            );
            path.push(
                lastPoint.x - arrowWidth * Math.cos(angle),
                lastPoint.y + arrowWidth * Math.sin(angle),
                'Z'
            );
        } else {
            path.push(
                'L',
                lastPoint.x - arrowWidth * Math.cos(angle),
                lastPoint.y + arrowWidth * Math.sin(angle)
            );
            path.push(
                lastPoint.x - arrowLength * Math.sin(angle),
                lastPoint.y - arrowLength * Math.cos(angle)
            );
            path.push(
                lastPoint.x + arrowWidth * Math.cos(angle),
                lastPoint.y - arrowWidth * Math.sin(angle),
                'Z'
            );
        }

        return path;
    }

    // Initiate the chart
    $('#container').highcharts('Map', {
        "legend": {
            "enabled": true
        },
        "credits": {
            "enabled": false
        },
        "series": [{
            "nullColor": "rgba(200, 200, 200, 0.2)",
            "mapData": Highcharts.maps['countries/us/us-all'],
            "borderColor":...