You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewGeolocation Accuracy Indicator — Free Real GPS Accuracy Demo
Geolocation Accuracy Indicator · Dashboards · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Geolocation Accuracy Indicator — Real Coordinates, Honest Fallback
This snippet calls the real navigator.geolocation API and renders what it actually returns: latitude, longitude, and — the part most demos skip — the device's own reported accuracy value in meters, drawn as a circle on a simple abstract grid rather than a real map (no tiles, no map library, no API key). It pairs naturally with other permission-gated snippets like screen wake lock and canvas audio bars that share the same honesty pattern.
getCurrentPosition and what accuracy means
Clicking "Locate me" calls navigator.geolocation.getCurrentPosition(success, error, options). The success callback receives a GeolocationPosition whose coords carries latitude, longitude, and accuracy — a 95%-confidence radius in meters around the reported point, not a guarantee of exact position. A phone with GPS might report 5-20m; a laptop resolving location from Wi-Fi/IP might report hundreds or thousands of meters. The circle's size scales with that number, so a huge circle is itself meaningful information, not a rendering bug.
watchPosition for continuous updates
The "Watch position" toggle calls navigator.geolocation.watchPosition(), which keeps firing the success callback as the device moves (or as the provider refines its estimate), and is cleared with clearWatch(id) — both on manual toggle-off and on beforeunload, so a stray watch never keeps running after the demo is left.
Why the fallback is essential, not optional
Geolocation is permission-gated by design, and denial is the common case in a sandboxed preview: the browser may lack support, the user may decline the prompt, the surrounding iframe's Permissions-Policy may block the geolocation feature outright, or the request may simply time out. handleError() inspects the GeolocationPositionError.code (1 = permission denied, 2 = position unavailable, 3 = timeout) and routes every case into showExample(), which fills the grid with a clearly labeled example coordinate (Golden Gate Park) and a plausible accuracy radius, so the layout is never empty or stuck on "Requesting…".
An abstract grid, not a real map
The grid is deliberately not a map integration — no tile server, no third-party JS, no API key to configure — just a CSS grid background with a circle and dot positioned at its center, scaled by accuracy. That keeps the snippet dependency-light and framework-agnostic while still communicating the geolocation concept clearly. Swap in a real map library in production if you need actual cartography; this snippet's job is to demonstrate the API honestly.
Build with AI
Build, Understand, Optimize, and Extend It With AI
Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain what the Geolocation API's accuracy value actually represents (a confidence radius, not a precision guarantee) and why the circle's size should scale with it rather than staying a fixed size. It's also useful for reasoning about the fallback design — ask why handleError() branches on the specific GeolocationPositionError.code instead of treating every failure identically, and why the example position is visually distinguished (a muted gray circle) from a real reading rather than looking identical. For extensions, ask it to add a history trail of watched positions, compute distance from the example position to the real one once permission is granted, or add a manual coordinate-entry fallback for testing without triggering the browser prompt at all. Treat the code less like a finished artifact and more like a starting point for a conversation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a "geolocation accuracy indicator" in plain HTML, CSS, and JavaScript using the real Geolocation API — no map libraries or CDNs.
Requirements:
- A readout showing latitude, longitude, and accuracy (in meters), plus an abstract CSS-grid "map" placeholder with a center dot and a circle whose size scales with the reported accuracy value (larger accuracy number = less precise = bigger circle).
- A "Locate me" button that calls navigator.geolocation.getCurrentPosition(success, error, { enableHighAccuracy: true, timeout: 8000 }) and renders the real coords.coords.latitude/longitude/accuracy on success.
- A "Watch position" toggle button that calls navigator.geolocation.watchPosition() for continuous live updates and navigator.geolocation.clearWatch() to stop, also clearing any active watch on page unload.
- CRITICAL: implement a full fallback. Feature-detect with 'geolocation' in navigator first. In the error callback, branch on the GeolocationPositionError code (1 = permission denied, 2 = position unavailable, 3 = timeout) and, for every case (including unsupported browsers and blocked Permissions-Policy in a sandboxed iframe, a common and expected scenario), fall back to rendering a clearly labeled example/demo coordinate and accuracy value so the grid is never blank or stuck on a "Requesting…" state — visually distinguish the example position (e.g. a muted gray circle) from a real reading.
- A status text element that always states in plain language whether the current reading is real or an example, and why, so a viewer understands the state without guessing.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste HTML, CSS, and JSAn example position fills the grid immediately.
- 2Click "Locate me"The browser prompts for real location access.
- 3Allow itYour real latitude, longitude, and accuracy render.
- 4Click "Watch position"Updates continue live as your position changes.
- 5Deny or block accessThe status explains why; an example position returns.
- 6Read the accuracy radiusA larger circle means a less precise reported position.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
It's the device's own 95%-confidence radius, in meters, around the reported coordinate — not a promise of exact position. A GPS-equipped phone outdoors might report 5-20 meters; a laptop resolving location from Wi-Fi or IP address alone might report hundreds or thousands of meters. The circle on the grid scales with this value, so a large circle is meaningful, not a bug.
Geolocation is permission-gated, and denial is common: you may decline the browser prompt, your browser may lack support, or — very often in a sandboxed preview iframe — the surrounding page's Permissions-Policy blocks the geolocation feature for that frame entirely. The code checks the specific GeolocationPositionError code and falls back to a clearly labeled example coordinate rather than leaving the grid blank.
"Locate me" calls getCurrentPosition() once for a single reading. "Watch position" calls watchPosition(), which keeps firing updates as your device's estimate changes (useful while actually moving), and is stopped with clearWatch() either by clicking the button again or automatically on page unload.
No — deliberately not. The grid is a plain CSS background with a circle and dot positioned at its center; there's no tile server, map library, or API key involved. That keeps the snippet dependency-light; swap in a real mapping library for production cartography while keeping the same accuracy-driven data flow.
Move the getCurrentPosition/watchPosition calls into a mount effect or composable, store the returned coordinates and accuracy in state, and clear any active watch in the cleanup function. Keep the error-code handling (1/2/3) so the same honest fallback behavior carries over into the framework version.