randomfox (randomfox) wrote,
randomfox
randomfox

Coordinates Converter in Javascript


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="author" content="Po Shan Cheah" />

<title>Coordinates Converter</title>

<script type="text/javascript">

var result_count = 0;

function clearOutput() {
    var output = document.getElementById("output");
    while (output.firstChild)
	output.removeChild(output.firstChild);

    document.getElementById("outnorth").value = "";
    document.getElementById("outwest").value = "";
    document.getElementById("outcoords").value = "";
    document.getElementById("outgeotag").value = "";
    result_count = 0;
    return true;
}

function newFrag() {
    return document.createDocumentFragment();
}

function writeFrag(frag) {
    var output = document.getElementById("output");
    output.insertBefore(frag, output.firstChild);
}

// Write a string to the document fragment.
function write(frag, str) {
    var txt = document.createTextNode(str);
    frag.appendChild(txt);
}

// Write a string with a newline to the document fragment.
function writeln(frag, str) {
    var txt = document.createTextNode(str);
    var newline = document.createElement("br");
    frag.appendChild(txt);
    frag.appendChild(newline);
}

// Write a heading with a newline to the document fragment.
function writeln_head(frag, str) {
    var txt = document.createTextNode(str);
    var newline = document.createElement("br");
    var head = document.createElement("u");
    head.appendChild(txt);
    frag.appendChild(head);
    frag.appendChild(newline);
}

// Write a string in red to signify an error.
function errorln(str) {
    var output = document.getElementById("output");
    var txt = document.createTextNode(str);
    var newline = document.createElement("br");
    var span = document.createElement("span");
    // setAttribute("class" ...) does not work in IE.
    span.className = "error";
    span.appendChild(txt);
    span.appendChild(newline);
    output.insertBefore(span, output.firstChild);
}

// Format floating point number in fixed-point notation.
function fixedfmt(num, decimals) {
    // Number.toFixed is a Javascript 1.5 feature, so we need to
    // test for it here.
    return num.toFixed ? num.toFixed(decimals) : num;
}

// Convert coordinates from ddd mm.mmm to decimals.
function convert(deg, minwhole, mindec) {
    // Force the decimal portion of the minutes to be 3 decimal places.
    // And then trim leading zeros.
    mindec = ((mindec + "000") . slice(0, 3) . replace(/^0+/, "")) || "0";

    // Trim leading zeros so that the string will not be treated as octal.
    minwhole = minwhole.replace(/^0+/, "") || "0";
    deg = deg.replace(/^0+/, "") || "0";

    return parseInt(deg) + (parseInt(minwhole) + parseInt(mindec) / 1000) / 60;
}

function main() {
    var inputfield = document.getElementById("input");
    var coordpat = /(\d+)\D+(\d+)\D+(\d+)\D+(\d+)\D+(\d+)\D+(\d+)/;
    var result = inputfield.value.match(coordpat);
    if (result == null) {
	errorln("Not recognized as coordinates: '" + inputfield.value + "'");
	return false;
    }
    var northcoord = fixedfmt(convert(result[1], result[2], result[3]), 6);
    var westcoord = fixedfmt(-convert(result[4], result[5], result[6]), 6);
    ++result_count;

    var nwcoords = northcoord + " " + westcoord;
    var geotag = "geotagged geo:lat=" + northcoord + " geo:lon=" + westcoord;

    var frag = newFrag();
    writeln_head(frag, result_count + ": " + inputfield.value);
    writeln(frag, northcoord);
    writeln(frag, westcoord);
    writeln(frag, nwcoords);
    writeln(frag, geotag);
    writeln(frag, " ");
    writeFrag(frag);

    document.getElementById("outnorth").value = northcoord;
    document.getElementById("outwest").value = westcoord;
    document.getElementById("outcoords").value = nwcoords;
    document.getElementById("outgeotag").value = geotag;
    return true;
}

</script>

<style type="text/css">
body {
    background: #fff none;
    color: #000;
    font: normal 14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

h1 { font-size: 20px; }

.error { color: red; }

#output {
    white-space: pre;
    font: normal 14px monospace;
}

form { margin: 1em 0; }

input[type="text"]:hover { background: #ffa; }
</style>
</head>

<body onload="clearOutput();">
    <h1>Coordinates Converter</h1>
    <noscript>
	<span class="error">
	    The Coordinates Converter requires a browser that supports Javascript.<br />
	    Your browser either does not support Javascript or it has Javascript disabled. If you wish to run the solver, please upgrade your browser or enable Javascript support.<br />&nbsp;<br />
	</span>
    </noscript>

    <script type="text/javascript">
<!--
// Test for W3C DOM API.
if (document.getElementById) {
}
else {
    document.write('<span class="error">The Coordinates Converter requires a browser that supports the W3C DOM API.<br \/>Your browser does not support this API. If you wish to run the solver, please upgrade your browser. The latest versions of Mozilla Firefox, Opera, and Internet Explorer have support for this API.<br \/>&nbsp;<br \/><\/span>');
}
// -->
    </script>

    <form action="#" onsubmit="main(); return false;">
	<label>Enter dd mm.mmm coordinates here to get dd.dddddd coordinates below:<br />
	<input type="text" name="input" id="input" size="60" value="n39 40.401 w74 17.207" onfocus="select();" /></label><br />
	<input type="submit" value="Convert it" />&nbsp;
	<input type="button" value="Clear results" onclick="clearOutput();" />
    </form>
    <hr />
    <form action="#" onsubmit="return false;">
	Results: (select/copy from below)<br />
	<input type="text" id="outnorth" size="15" onclick="select();" value="" />&nbsp;
	<input type="text" id="outwest" size="15" onclick="select();" value="" /><br />
	<input type="text" id="outcoords" size="30" onclick="select();" value="" /><br />
	<input type="text" id="outgeotag" size="60" onclick="select();" value="" />
    </form>

    <hr />
    <br />
    <div id="output"></div>
</body>
</html>
<!--
Last updated: April 3, 2006
-->
<!-- vim:set tw=0: -->

Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments