← Tutorials

Tutorial Series · Part 26 of 27

Building a Browser-Based Navigation Lab

Use browser geolocation and device motion APIs safely for reader experiments.

By

  • browser
  • geolocation
  • imu
Series Context

Navigation from First Principles

This article is part of an ordered course. Use the previous and next links to stay in sequence.

Progress Part 26 of 27
Previous Map Matching and Feature Matching Next Capstone: Build a Simple GNSS/INS Fusion Simulator

A personal website can become more than static articles. With permission, a browser can access device location and motion data, making it possible to build simple navigation experiments. MDN notes that browser geolocation requires a secure context, may be blocked by Permissions-Policy and requires explicit user permission.1 DeviceMotionEvent provides device motion and orientation-rate information, with secure-context and browser coordinate-convention caveats.2

Why the browser is interesting

You want readers to learn navigation by recording a short walk, seeing noisy location fixes and comparing them with crude dead reckoning. This is powerful, but it must be privacy-conscious and honest about browser limitations.

What the browser can provide

A browser position sample might contain:

(t,ϕ,λ,h,accuracy)(t, \phi, \lambda, h, accuracy)

A device-motion sample might contain approximate acceleration and rotation-rate information:

(t,adevice,ωdevice)(t, \mathbf{a}_{device}, \boldsymbol{\omega}_{device})

The lab should treat these as educational data, not survey-grade data.

Interactive demo: record-my-walk navigation lab

The live widget below keeps the entire flow local. It mimics the permission and recording model, stores samples only in memory, and exports a self-describing JSON file instead of sending anything to a backend.

Interactive Demo

Browser Navigation Lab

This lab stays local by default. It walks through browser permissions, recording, and export flow without sending data anywhere.

Privacy-first setup

Location and motion permissions are not granted yet. Data stays in memory unless exported.

Speed and reported accuracy
Acceleration magnitude

Controls

Grant one or both permissions, record a short trace, then compare the path with the speed, accuracy, and acceleration charts.

Readouts

Samples0
Last accuracyn/a
Last speedn/a
Storage modememory only

What to watch

  • The user must explicitly request permissions before recording.
  • The UI states that data remains local unless exported.
  • Speed, reported accuracy and acceleration magnitude update together.
  • Export is framed as a reader action, not an automatic upload.

Try this

Grant one permission but not the other and start the lab. That highlights an important product reality: browser navigation tooling must handle partial capability, inconsistent APIs and denial states without pretending everything is available.

Limits of browser sensors

Browser APIs are not consistent enough for serious inertial navigation. Device axes, sampling rates, permission models and sensor filtering differ between platforms. The right framing is educational playground, not precision instrument.

Footnotes

  1. MDN Web Docs, “Geolocation: getCurrentPosition()”. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition - Browser geolocation requires a secure context, can be blocked by permissions policy and requires explicit user permission. Accessed 2026-06-11. ↩

  2. MDN Web Docs, “DeviceMotionEvent”. https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent - Browser API for device motion and orientation-rate information; secure-context and coordinate-convention caveats. Accessed 2026-06-11. ↩