MGRS Conversion - compare with NGA
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://rawgit.com/semeyon/bower-jvectormap-2/master/jquery-jvectormap-2.0.0.min.js"></script>
<script src="https://www.smartsystemsgt.com/cdn/adminlte/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/1.2.2/jquery-jvectormap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/css/theme.blue.min.css">
<link rel="stylesheet" href="https://rawgit.com/semeyon/bower-jvectormap-2/master/jquery-jvectormap-2.0.0.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"...
CSS
.draggable {
cursor: move;
}
.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,
markersSelectable: true,
markersSelectableOne: true,
markerStyle: {
initial: {
fill: '#00ff00'
},
selected: {
fill: 'yellow'
},
selectedHover: {
cursor: 'move'
}
},
backgroundColor: '#383f47',
onMarkerClick: function (e, code) {
/*
if (markersCoords[code]) {
console.log("existing coordinate for " + code + e.target);
console.log(e);
}*/
//delete markersCoords[code];
//map.removeMarkers([code]);
if (map.label) {
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.click(function (e) {
/*
var marker = $(e.target);
var isMarker = marker.attr('class').indexOf('jvectormap-marker') != -1;
...