MGRS Conversion - compare with NGA

by hansenmc

HTML

<script src="http://jvectormap.com/js/jquery-jvectormap-1.2.2.min.js"></script>
<link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-1.2.2.css">
<script src="http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css">
<div>
    <h3>Local MGRS and Lat/Lon conversion</h3>
    <ul>
        <li>Enter an MGRS coordinate convert to Lat/Lon and add to the map and table</li>
        <li>Enter Lattitude and Longitude and convert to MGRS and add to the map and table</li>
        <li>Verify conversion results by referring to NGA conversion service URLs at the bottom</li>
    </ul>
   
</div>
<form>
    <table>
        <tr>
            <td valign="top" width="30%">
                <label for="MGRS">MGRS:</label>
                <input type="text" name="MGRS" id="MGRS" value="15SUD0370514711" />
            </td>
            <td width="10%">
                <input type="button" id="toMGRS" value="<< convert to MGRS and add to Map<<" />
                <input type="button" id="toLatLon" value=">> convert to Lat/Lon and add to Map>>" />
            </td>
            <td valign="top" width="60%">
                <label for="lattitude">Latitude:</label>
                <input type="text" id="lattitude" />
                <br/>
                <label for="longitude">Longitude:</label>
                <input type="text" id="longitude" />
            </td>
        </tr>
        <tr id="results">
            <td id="ngaResults" colspan="3"></td>
        </tr>
        <tr>
            <td colspan="3">
                 <h3>Coordinate Visualization and Input</h3>
    <ul>    
        <li>Double-click anywhere on the map to add a marker and a row in the table with it's MGRS and Lat/Lon coordinates</li>
        <li>Click on the marker to remove it from the map and table</li>
        
        <li>Mouse over a...

CSS

.highlight {
    background-color:yellow !important;
}
.invalid {
     background-color:red;   
}
label {
    font-weight: bold;
}
#localResults, #ngaResults {
    vertical-align:top;
}

JavaScript

$(document).ready(function () {
    var mgrsList = $('#mgrsList').tablesorter({
        widgets: ['zebra']
    });
    var markersCoords = {};
    var map = new jvm.Map({
        map: 'world_mill_en',
        container: $('#map'),
        scaleColors: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial',
        hoverOpacity: 0.7,
        hoverColor: false,
        markerStyle: {
            initial: {
                fill: '#00ff00'
            },
            selected: {
                fill: 'yellow'
            }
        },
        backgroundColor: '#383f47',
        onMarkerClick: function (e, code) {
            delete markersCoords[code];
            map.removeMarkers([code]);
            map.label.hide();
            updateTable();
        },
        onMarkerLabelShow: function (event, label, code) {
            var marker = markersCoords[code];
            label.html('<div><strong>MGRS: </strong>' + code + '</div>' +
                '<div><strong>Lattitude: </strong>' + marker.lat + '</div>' +
                '<div><strong>Longitude: </strong>' + marker.lon);
        },
        onMarkerOver: function (event, code) {
            mgrsList.find('tr').has('td:contains(' + code + ')').find('td').toggleClass('highlight');
        },
        onMarkerOut: function (event, code) {
            mgrsList.find('tr').has('td:contains(' + code + ')').find('td').toggleClass('highlight');
        }
    });
    map.container.dblclick(function (e) {
        var latLng = map.pointToLatLng(e.offsetX, e.offsetY),
            targetCls = $(e.target).attr('class');

        if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
            addMarkerToMap(latLng.lat, latLng.lng);
        }
    });
    var getMGRS = function (lat, lon) {
        return usng.LLtoUSNG(lat, lon, 5).split(' ').join('');
    };
    var addMarkerToMap = function (lat, lon, mgrs) {
        if (!mgrs) {
            mgrs = getMGRS(lat,...