Meta:Map Tools: Difference between revisions

No edit summary
No edit summary
Line 3: Line 3:
</div>
</div>


<div id="pixel-to-mile-calculator" style="max-width: 400px; padding: 1em; border: 1px solid #aaa; background: #f9f5ec;">
<div id="pixel-to-mile-calculator" class="adaris-tool-box">
   <label for="pixelInput"><strong>Pixels:</strong></label><br>
   <label for="pixelToMileInput"><strong>Pixels:</strong></label><br>
   <input id="pixelInput" type="number" style="width: 100%; margin-top: 0.4em;" placeholder="Enter pixels">
   <input id="pixelToMileInput" type="number" placeholder="Enter pixels">


   <p style="margin-top: 1em;">
   <p>
     <strong>Distance:</strong>
     <strong>Distance:</strong>
     <span id="mileOutput">0 mi</span>
     <span id="pixelToMileOutput">0 mi</span>
   </p>
   </p>
</div>
</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>