MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 35: / Line 35: @@
 mw.loader.load('https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.0.0/legacy/ol.js');
 mw.loader.load('/maps/elemara/elemara-map.js');
+document.addEventListener("DOMContentLoaded", function () {
+  const container = document.getElementById("pixel-area-calculator");
+  if (!container) {
+    return;
+  }
+  container.innerHTML = `
+    <div class="pixel-area-tool">
+      <h3>Pixel to Square Miles Calculator</h3>
+      <label>
+        Width in pixels:
+        <input id="pixel-width" type="number" min="0" step="any" placeholder="Width">
+      </label>
+      <label>
+        Height in pixels:
+        <input id="pixel-height" type="number" min="0" step="any" placeholder="Height">
+      </label>
+      <button id="pixel-area-button" type="button">Calculate</button>
+      <div id="pixel-area-result"></div>
+    </div>
+  `;
+  const button = document.getElementById("pixel-area-button");
+  button.addEventListener("click", function () {
+    const widthPixels = parseFloat(document.getElementById("pixel-width").value);
+    const heightPixels = parseFloat(document.getElementById("pixel-height").value);
+    const result = document.getElementById("pixel-area-result");
+    if (isNaN(widthPixels) || isNaN(heightPixels)) {
+      result.textContent = "Please enter both pixel values.";
+      return;
+    }
+    const widthMiles = (widthPixels / 1000) * 50;
+    const heightMiles = (heightPixels / 1000) * 50;
+    const squareMiles = widthMiles * heightMiles;
+    result.innerHTML = `
+      <strong>${widthMiles.toLocaleString(undefined, { maximumFractionDigits: 2 })} miles</strong>
+      ×
+      <strong>${heightMiles.toLocaleString(undefined, { maximumFractionDigits: 2 })} miles</strong>
+      =
+      <strong>${squareMiles.toLocaleString(undefined, { maximumFractionDigits: 2 })} mi²</strong>
+    `;
+  });
+});