1

Within the framework of manual marker input (Adding GeoJSON properties when creating marker in Leaflet), I would like to propose the conversion of coordinates in degrees, minutes, and seconds to decimal degrees.

I looked for the way that seemed simplest to me, taking inspiration from developments.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Convert DMS to Decimal Degrees </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
</head>

<body>
 <div>
 <form id="dm2decimal" name="dm2decimal" >
            <label for="degrees1">Convert DMS -> Decimal degrees | Degrees: <input type="text" id="degrees1" name="degrees1" size="3" maxlength="3" /></label>
            <label for="minutes1">Minutes: <input type="text" id="minutes1" name="minutes1" size="2" maxlength="2" /></label>
            <label for="secondes1">Seconds: <input type="text" id="seconds1" name="seconds1" size="10" maxlength="10" /></label>
                        <select id="direction" name="direction">
                <option value="N">N</option>
                <option value="S">S</option>
                <option value="E">E</option>
                <option value="W">W</option>
            </select>
            <input type="button" onclick="convert()" value="Convert">
            <!--<button type="button" onclick="convert()">Convert</button>-->   
        
</form>

Latitude: <textarea id="latdm" name="latdm" oninput="validateNumber(this)" rows="1" size="10" maxlength="10"></textarea>
Longitude: <textarea id="lngdm" name="lngdm" oninput="validateNumber(this)" rows="1" size="10" maxlength="10"></textarea>
Name: <input type="text" id="name" title="Name"></a>
</div>

<script>

$(document).ready(function() {
                $('#dm2decimal').validate({
                    rules: {
                        degrees1: {
                            required: true,
                            digits: true,
                            range: [0, 180]
                        },
                        minutes1: {
                            required: true,
                            number: true,
                            range: [0, 59]
                        },
                        
                        seconds1: {
                            required: true,
                            number: true,
                            range: [0, 59.9999999]
                        },
                        
                        
                    } //rules
                }); //validate
            }); //ready
            
// Forcer le séparateur point et refuser la virgule 

var validNumber = new RegExp(/^-?\d*\.?\d*$/);
var lastValid = document.getElementById("latdm").value;
function validateNumber(elem) {
  if (validNumber.test(elem.value)) {
    lastValid = elem.value;
  } else {
    elem.value = lastValid;
  }
}   
            
function convert()
    {
        var d1 = document.getElementById("degrees1").value;
        var m1 = document.getElementById("minutes1").value;
        var s1 = document.getElementById("seconds1").value;
        var cap = document.getElementById("direction").value;
        
       var dd = d1 + m1/60 + s1/3600;

    if (cap == "S" || cap == "W") {
        dd = dd * -1;
    } // Don't do anything for N or E
    return dd;
        
    if (cap == "N" || cap == "S")   
    document.getElementById("latdm").innerHTML = dd;

    if (cap == "E" || cap == "W")
    document.getElementById("lngdm").innerHTML = dd;    
    }
</script>
</body>
</html>

Once the degrees, minutes, and seconds are entered when I start the conversion, the latitude and longitude fields are not filled in. I don't see any error in the Chrome console.

0
2

You have 2 issues with the posted code:

  1. The code returns before setting the result in the appropriate form element. Move return dd; to the end of the function.

  2. The values returned by the <input> elements will be strings, so you will get unexpected results from this:

    var dd = d1 + m1/60 + s1/3600;
    

    like 420.233333333333333340.0033333333333333335. Convert the inputs to numbers (with parseFloat or parseInt) before processing them.

Updated convert function:

function convert()
    {
        var d1 = parseFloat(document.getElementById("degrees1").value);
        var m1 = parseFloat(document.getElementById("minutes1").value);
        var s1 = parseFloat(document.getElementById("seconds1").value);
        var cap = document.getElementById("direction").value;
        
       var dd = d1 + m1/60 + s1/3600;

    if (cap == "S" || cap == "W") {
        dd = parseFloat(dd) * -1;
    } // Don't do anything for N or E
        
    if (cap == "N" || cap == "S")   
    document.getElementById("latdm").innerHTML = dd;

    if (cap == "E" || cap == "W")
    document.getElementById("lngdm").innerHTML = dd;
    return dd;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.