Meta:Map Tools: Difference between revisions

@@ Line 2: / Line 2: @@
    Pixel calculator loading...
 </div>
+<div id="pixel-to-mile-calculator" style="max-width: 400px; padding: 1em; border: 1px solid #aaa; background: #f9f5ec;">
+  <label for="pixelInput"><strong>Pixels:</strong></label><br>
+  <input id="pixelInput" type="number" style="width: 100%; margin-top: 0.4em;" placeholder="Enter pixels">
+  <p style="margin-top: 1em;">
+    <strong>Distance:</strong>
+    <span id="mileOutput">0 mi</span>
+  </p>
+</div>
+<script>
+document.getElementById('pixelInput').addEventListener('input', function () {
+  var pixels = parseFloat(this.value);
+  if (isNaN(pixels)) {
+    document.getElementById('mileOutput').textContent = '0 mi';
+    return;
+  }
+  var miles = (pixels / 1000) * 50;
+  document.getElementById('mileOutput').textContent = Math.round(miles) + ' mi';
+});
+</script>