getCurrentPosition() — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Will getCurrentPosition() Ever Call You Back?</h1>
    <p class="pg-sub">
      This panel <strong>simulates</strong> a GPS fix that takes a while, and races it
      against the <code>timeout</code> you pass to <code>getCurrentPosition()</code> —
      so you can watch, deterministically, what "no timeout" actually means.
    </p>

<div class="wrap-controls" style="display:flex; flex-direction:column; gap:16px;">
        <div class="field">
          <label class="label" for="delay">Simulated GPS fix arrives after: <span class="mono" id="delayOut">3.0s</span></label>
          <div class="slider-row">
            <input type="range" id="delay" min="0" max="12000" step="500" value="3000" />
          </div>
        </div>

<label class="toggle">
          <input type="checkbox" id="useDefault" /><span class="switch"></span>
          <span>Use the default options — <code>timeout: Infinity</code> (what happens if you skip the options object)</span>
        </label>

<div class="field" id="timeoutField">
          <label class="label" for="timeout">Your <code>timeout</code> option: <span class="mono" id="timeoutOut">5.0s</span></label>
          <div class="slider-row">
            <input type="range" id="timeout" min="500" max="10000" step="500" value="5000" />
          </div>
        </div>
      </div>

<div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="good">Good signal</button>
        <button class="btn sm" data-preset="weak">Weak signal, sane timeout</button>
        <button class="btn sm" data-preset="bug">The bug: weak signal, no timeout</button>
      </div>

<div class="btn-row" style="margin-top:16px">
        <button class="btn primary" id="call">Call getPosition()</button>
        <button class="btn ghost" id="resetCall">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What's happening right now</div>
      <div class="stopwatch" id="stopwatch">0.0s</div>
      <div class="status" id="status" style="margin-top:10px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — click "Call getPosition()" above.</span>
      </div>
      <div class="log" id="log" style="margin-top:12px; max-height: 160px; overflow:auto;">
        <div class="muted">Log will appear here.</div>
      </div>
      <p class="hint">
        Toggle "use the default options" on, pick a slow signal, and watch the stopwatch —
        nothing stops it. That's <code>timeout: Infinity</code>, not a bug in this demo.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> The watchPosition() radio — forget clearWatch() and see what happens</div>
      <p class="hint" style="margin-top:0">
        <code>watchPosition()</code> keeps firing until something calls <code>clearWatch()</code> on its ID —
        same shape of bug as a forgotten <code>clearInterval()</code>.
      </p>
      <div class="btn-row">
        <button class="btn good" id="startWatch">Start watching (watchPosition)</button>
        <button class="btn bad" id="stopWatch">Stop watching (clearWatch)</button>
        <button class="btn ghost" id="unmount">Simulate component unmount</button>
      </div>
      <div class="status" id="watchStatus" style="margin-top:12px">
        <span class="radio-dot off" id="radioDot"></span>
        <span id="watchText">Radio off. Not watching.</span>
      </div>
      <div class="big-num" id="tickCount">0</div>
      <p class="hint" id="watchHint">position updates received so far</p>
      <div class="banner info" id="unmountBanner" style="display:none"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.