first commit, basic version

6 years ago · e92cced7be
2 changed files with 66 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1 @@
+Simple tool to paste a GeoJSON FeatureCollection and creates a <mapframe> element that you can paste into mediawiki pages.
--- a/index.html
+++ b/index.html
@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+    <head>
+        <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
+        <style>
+body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+#left {
+    float: left;
+    width: 50%;
+    height: 100%;
+}
+
+#geojson {
+    height: 400px;
+    width: 90%;
+}
+
+#right {
+    width: 48%;
+}
+        </style>   
+    </head>
+    <body>
+        <div id="container">
+            <div id="left">
+                <textarea id="geojson">
+
+                </textarea> <br />
+                <button id="generateMapframe">Create Mapframe</button>
+            </div>
+            <pre id="right">
+
+            </pre>
+        </div>
+        <script>
+document.getElementById('generateMapframe').addEventListener('click', () => {
+    let fc;
+    try {
+        fc = JSON.parse(document.getElementById('geojson').value);
+    } catch (e) {
+        alert('Invalid GeoJSON');
+        return;
+    }
+    window.foo = fc;
+    const center = turf.center(fc);
+    const lon = center.geometry.coordinates[0];
+    const lat = center.geometry.coordinates[1];
+    const mapframe = `
+        &lt;mapframe latitude="${lat}" longitude="${lon}" zoom="8">
+            ${JSON.stringify(fc, null, 2)}
+        &lt;/mapframe>
+    `;
+    document.getElementById('right').innerHTML = mapframe;
+});
+
+        </script>
+    </body>
+
+</html>
			`@ -0,0 +1 @@`
			`Simple tool to paste a GeoJSON FeatureCollection and creates a <mapframe> element that you can paste into mediawiki pages.`