[Grid Map] Adjusted coordinate info to not jump around

application/views/gridmap/index.php

@@ -33,6 +33,12 @@
 .cohidden {
     display:none;
 }
+#latDeg, #lngDeg {
+    width: 170px;
+}
+#locator, #distance, #bearing {
+    width: 120px;
+}
 </style>
 <div class="container">
 
@@ -100,7 +106,7 @@
 <div id="gridmapcontainer">
 	<div id="gridsquare_map" style="width: 100%; height: 800px"></div>
 </div>
-<div class="coordinates text-center d-flex">
+<div class="coordinates d-flex">
         <div class="cohidden">Latitude: </div>
         <div class="cohidden col-auto text-success font-weight-bold" id="latDeg"></div>
         <div class="cohidden">Longitude: </div>

assets/js/leaflet/geocoding.js

@@ -16,13 +16,19 @@ function ConvertDDToDMS(lat, lng) {
 		lng = lng - 360;
 	}
 
-	LatLng['latDeg'] = (lat < 0 ? "S" : "N") + " " + (0 | (lat < 0 ? (lat = -lat) : lat)) + "° " + (0 | (((lat += 1e-9) % 1) * 60)) + "' " + ((0 | (((lat * 60) % 1) * 6000)) / 100) + "\"";
+	LatLng['latDeg'] = (lat < 0 ? "S" : "N") + " " + pad((0 |(lat < 0 ? (lat = -lat) : lat)),3) + "° " + pad(0 | (((lat += 1e-9) % 1) * 60),2) + "' " + ((0 | (((lat * 60) % 1) * 6000)) / 100) + "\"";
 
-	LatLng['lngDeg'] = (lng < 0 ? "W" : "E") + " " + (0 | (lng < 0 ? (lng = -lng) : lng)) + "° " + (0 | (((lng += 1e-9) % 1) * 60)) + "' " + ((0 | (((lng * 60) % 1) * 6000)) / 100) + "\"";
+	LatLng['lngDeg'] = (lng < 0 ? "W" : "E") + " " + pad((0 | (lng < 0 ? (lng = -lng) : lng)), 2) + "° " + pad(0 | (((lng += 1e-9) % 1) * 60),2) + "' " + ((0 | (((lng * 60) % 1) * 6000)) / 100) + "\"";
 
 	return LatLng;
 }
 
+function pad(n, width, z) {
+  z = z || '0';
+  n = n + '';
+  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+}
+
 const latLngToLocator = (lat, lng) => {
 	if (lng < -180) {
 		lng = lng + 360;