Maintenance: geolocation fallback, token handling, a11y and docs

[fadyehabamer]

Summary

• Fix: blank page when location is denied/unavailable. The map was only created inside the geolocation success callback, so denying the permission, ignoring the prompt, or loading over plain HTTP left an empty page (and threw TypeError where navigator.geolocation is undefined). The map now renders immediately with a world view and re-centres on the user when a position arrives (10s timeout).
• Fix: invalid SweetAlert2 option. button: "OK" is a SweetAlert v1 option. SweetAlert2 warns "Unknown parameter" and ignores it. Replaced it with confirmButtonText.
• Refactor: one Mapbox token constant. The same token was hard-coded twice. It's now a single MAPBOX_ACCESS_TOKEN, with a comment about URL restriction.
• a11y: added a main landmark, a visually hidden h1, a labelled map region and a <noscript> message.
• Meta: added description and theme-color.
• Docs: README now covers features, how to run it locally (it needs an HTTP server because main.js is an ES module, and geolocation needs HTTPS or localhost), the file layout and Mapbox token guidance.

Action needed from the owner: Mapbox token

The token in main.js is a public pk. token, not a secret sk. token. It is meant to be visible in browser code, but it has been in the public git history and anyone can reuse it. Please:

1. In https://account.mapbox.com/access-tokens/, add URL restrictions so it only works on https://location-distance-calculator.vercel.app (and http://localhost if you develop locally).
2. If it has ever been unrestricted, rotate it: create a new restricted token, update MAPBOX_ACCESS_TOKEN, then delete the old one.

This PR does not change the token value.

Verification

• node --check main.js passes.
• Ran main.js in a Node vm harness with stubbed mapboxgl, MapboxDirections, swal and navigator:
  • granted: map created, then jumpTo the user's coordinates at zoom 9
  • denied: map created at the world view, then an info dialog. Before this change: no map at all.
  • no navigator.geolocation: map created, then an info dialog. Before this change: TypeError.
  • The dialog options contain no unknown SweetAlert2 parameters (checked against the defaultParams of the sweetalert2@11 bundle).
• CDN URLs checked with curl, all return 200: Mapbox GL JS v2.10.0 (JS and CSS), mapbox-gl-directions v4.1.0 (JS and CSS), sweetalert2@11.
• Local references (style.css, main.js, LICENSE) exist. CRLF line endings are preserved.
• Not checked in a browser. The visual result still needs a quick look.

Deliberately not changed

• Mapbox GL JS stays on v2.10.0. v3 changes the license and rendering, which needs a visual check. mapbox-gl-directions v4.3.3 is out, but v4.1.0 still works.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
location-distance-calculator	Ready	Preview	Sep 24, 2026 11:51am UTC

[Copilot]

Copilot review overview

🟡 Changes recommended

Address the SweetAlert2 global and ensure the no-script fallback is visible.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1

Open (1)

• Noscript fallback hidden below full-height map · New

What changed in this PR

Improves geolocation fallback behavior, accessibility, token handling, metadata, and documentation for the map application.

Changes:

• Initializes the map before geolocation resolves or fails.
• Adds accessibility markup, metadata, and no-script messaging.
• Centralizes the Mapbox token and expands setup guidance.

File	Summary
style.css	Adds visually hidden heading styling.
README.md	Documents usage, structure, setup, and token restrictions.
main.js	Adds fallback map initialization and centralized token handling. Moderate issue (1 vote): use Swal.fire(...) instead of swal(...) for SweetAlert2 v11 compatibility.
index.html	Adds metadata, accessibility markup, and no-script messaging. Moderate issue (4 votes): make the no-script message visible without scrolling past the full-height map.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.