Create Page “util/latlon/index”

BuildTheEarth · Aug 4, 2023 · a664efc · a664efc
1 parent 28bb382
commit a664efc
Showing 1 changed file with 170 additions and 0 deletions.
diff --git a/docs/util/latlon/index.md b/docs/util/latlon/index.md
@@ -0,0 +1,170 @@
+---
+sidebar_position: 1
+title: Conversion between XYZ and Latitude/Longitude
+---
+> Below is a tool that will help you convert up to 1000 coordinates at a time from the BTE Dymaxion projection to latitude and longitude and vice-versa. Input one coordinate pair per line, separated by a space, in the order x, z or latitude, longitude. Courtesy of [SmylerMC](https://github.com/SmylerMC).
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <link href='https://fonts.googleapis.com/css?family=Manrope' rel='stylesheet'>
+    <style>
+        body {
+            text-align: center;
+            font-family: 'Manrope';font-size: 22px;
+            margin: 0;
+            color: white;
+        }
+        main {
+            height: 100vh;
+        }
+        .coordbox {
+            display: inline-grid;
+            width: min(400px, 85%);
+            margin: 10px;
+        }
+        .coordbox textarea {
+            min-height: 20vh;
+            display: inline-block;
+            border-width: 1px;
+            border-style: solid;
+            border-radius: 5px;
+            border-color: #808080;
+            resize: none;
+            background-color: #181A1B;
+            color: white;
+        }
+        .coordbox h2 {
+            margin: 5px;
+        }
+        button {
+            padding: 10px;
+            margin: 5px;
+            background-color: rgb(33, 150, 243);
+            color: rgb(255, 255, 255);
+            font-size: 1em;
+            border-style: solid;
+            border-radius: 5px;
+            border-color:  rgb(33, 150, 243);
+            border-size: 8px;
+        }
+        button:hover {
+            background-color: rgb(30, 136, 229);
+            border-color: rgb(30, 136, 229);
+            border-size: 10px;
+        }
+        #errorbox {
+            background-color: rgba(190, 0, 0, 0);
+            margin: 20px;
+            padding: 20px;
+            color: rgb(255, 255, 255);
+            margin: 25px;
+        }
+    </style>
+  </head>
+  <body>
+    <div id="content">
+    <main>
+        <div id="errorbox"></div>
+        <div class="coordbox">
+            <h2>Minecraft Coordinates</h2>
+            <textarea id="mcarea"></textarea>
+            <button onclick="mc2geo()">Minecraft → Geographic</button>
+        </div>
+        <div class="coordbox">
+            <h2>Geographic Coordinates</h2>
+            <textarea id="geoarea"></textarea>
+            <button onclick="geo2mc()">Geographic → Minecraft</button>
+        </div>
+    </main>
+    </div>
+    <script laguage="javascript">
+        const ENDPOINT = "https://smybteapi.buildtheearth.net";
+        function geo2mc() {
+            clearError();
+            let allgeocoords = parsetextarea(document.getElementById("geoarea"));
+            let args = [];
+            allgeocoords.forEach(e => args.push("geopos=" + e.join(",")));
+            let url = ENDPOINT + "/projection/fromGeo?" + args.join("&");
+            let req = new XMLHttpRequest();
+            req.onreadystatechange = function() {
+                if (req.readyState == 4 && req.status == 200) {
+                    let res = JSON.parse(req.responseText).mc_positions;
+                    let entries = [];
+                    res.forEach(e => {
+                        if(e != null) {
+                            entries.push(e.join(" "));
+                        } else {
+                            entries.push("Outside projection bounds");
+                        }
+                    });
+                    document.getElementById("mcarea").value = entries.join("\n");
+                } else if(req.readyState == 4 && req.status == 400) {
+                    let res = JSON.parse(req.responseText);
+                    let str = "Error: " + res.error + " (" + res.details + ")";
+                    setError(str);
+                } else if(req.readyState == 4){
+                    setError("Unknown error: " + req.status);
+                }
+            }
+            req.open("GET", url, true);
+            req.send(null);
+        }
+        function mc2geo() {
+            clearError();
+            let allmccoords = parsetextarea(document.getElementById("mcarea"));
+            let args = [];
+            allmccoords.forEach(e => args.push("mcpos=" + e.join(",")));
+            let url = ENDPOINT + "/projection/toGeo?" + args.join("&");
+            let req = new XMLHttpRequest();
+            req.onreadystatechange = function() {
+                if (req.readyState == 4 && req.status == 200) {
+                    let res = JSON.parse(req.responseText).geo_positions;
+                    let entries = [];
+                    res.forEach(e => {
+                        if(e != null) {
+                            entries.push(e.join(" "));
+                        } else {
+                            entries.push("Outside projection bounds");
+                        }
+                    });
+                    document.getElementById("geoarea").value = entries.join("\n");
+                } else if(req.readyState == 4 && req.status == 400) {
+                    let res = JSON.parse(req.responseText);
+                    let str = "Error: " + res.error + " (" + res.details + ")";
+                    setError(str);
+                } else if(req.readyState == 4){
+                    setError("Unknown error: " + req.status);
+                }
+            }
+            req.open("GET", url, true);
+            req.send(null);
+        }
+        function parsetextarea(textarea) {
+            let lines = textarea.value.split("\n");
+            let coords = [];
+            for(let i=0; i<lines.length; i++) {
+                let strs = lines[i].split(" ");
+                if(strs.length != 2) setError("Invalid line: " + lines[i]);
+                let c1 = parseFloat(strs[0]);
+                let c2 = parseFloat(strs[1]);
+                if(Number.isNaN(c1) || Number.isNaN(c2)) {
+                    setError("Invalid line: " + lines[i]);
+                    return;
+                }
+                coords.push([c1, c2]);
+            }
+           return coords
+        }
+        function setError(err) {
+            let element = document.getElementById("errorbox");
+            element.textContent = err;
+            element.style.backgroundColor = "#FF0000";
+        }
+        function clearError() {
+            let element = document.getElementById("errorbox");
+            element.style.backgroundColor = "#00000000";
+            element.textContent = "";
+        }
+  </script>
+  </body>
+</html>