JSFiddle - React, Tailwind, and code Playground

by Kearnan Kelly

HTML

<h3>To Geographic from Web Mercator:</h3>
<label>Lon:</label><input id="numOneG" type="number"/><br/>
<span>(Absolute value must be greater than 180 and less than 20037508.3427892)</span><br/>
<label>Lat: </label><input id="numTwoG" type="number"/><br/>
<span>(Absolute value must be greater than 90 and less than 20037508.3427892)</span><br/>
<button onclick="ToGeographic();">Submit</button><br/>
<label>Lon: </label><input id="toGeographic1" type="number"/><br/>
<label>Lat: </label><input id="toGeographic2" type="number"/><br/>
<br/><br/>

<h3>To Web Mercator from Geographic:</h3>
<label>Lon: </label><input id="numOneM" type="number"/><br/>
<span>(Absolute value must be greater than 180)</span><br/>
<label>Lat: </label><input id="numTwoM" type="number"/><br/>
<span>(Absolute value must be greater than 90)</span><br/>
<button onclick="ToWebMercator();">Submit</button><br/>
<label>Lon: </label><input id="toWebMercator1" type="number"/><br/>
<label>Lat: </label><input id="toWebMercator2" type="number"/><br/>

CSS

input {
    width: 200px;
}
label {
    width: 40px;
    display: inline-block;
}
span {
    display: inline-block;
    font-size: 10px;
    margin-bottom: 12px;
    margin-left: 12px;
}

JavaScript

var ToGeographic = function()
    {
        var mercatorX_lon = parseFloat($('#numOneG').val());
        var mercatorY_lat = parseFloat($('#numTwoG').val());

        if (Math.abs(mercatorX_lon) < 180 && Math.abs(mercatorY_lat) < 90) {
            console.log("Out of bounds 1");
            return;
        }
        if ((Math.abs(mercatorX_lon) > 20037508.3427892) || (Math.abs(mercatorY_lat) > 20037508.3427892)) {
            console.log("Out of bounds 2");
            return;
        }
        var x = mercatorX_lon;
        var y = mercatorY_lat;
        var num3 = x / 6378137.0;
        var num4 = num3 * 57.295779513082323;
        var num5 = Math.floor((num4 + 180.0) / 360.0);
        var num6 = num4 - (num5 * 360.0);
        var num7 = 1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * y) / 6378137.0)));
        mercatorX_lon = num6;
        mercatorY_lat = num7 * 57.295779513082323;

        $("#toGeographic1").val(mercatorX_lon);
        $("#toGeographic2").val(mercatorY_lat);
    };

    var ToWebMercator = function()
    {
        var mercatorX_lon = parseFloat($('#numOneM').val());
        var mercatorY_lat = parseFloat($('#numTwoM').val());

        if ((Math.abs(mercatorX_lon) > 180 || Math.abs(mercatorY_lat) > 90)) {
            console.log("Out of bounds 3");
            return;
        }
        var num = mercatorX_lon * 0.017453292519943295;
        var x = 6378137.0 * num;
        var a = mercatorY_lat * 0.017453292519943295;
        mercatorX_lon = x;
        mercatorY_lat = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a))); Math.l

        $("#toWebMercator1").val(mercatorX_lon);
        $("#toWebMercator2").val(mercatorY_lat);
    };
}