Skip to main content
100%

Hook for watching the users current location as geo coordinates.

✓ Published0🌍 Public
Aabonello
Last edited Jul 27, 2021
Created on Dec 30, 2021

This example demonstrates a React hook that continuously tracks the user's current geographic coordinates using the browser's Geolocation API. It shows the live position data and any associated error state returned from the device. The hook leverages `navigator.geolocation.watchPosition` to subscribe to location updates, storing results via `useState` and cleaning up with `clearWatch` on unmount. It accepts optional `PositionOptions` to configure accuracy, timeout, and maximum age, making the location stream configurable and reactive within any React component.

AI-generated description

Similar vizzes

Loading thumbnail…

Get Location Once Mounted

The example demonstrates a Vue component that retrieves the user’s geographic coordinates once the component is mounted, then uses that location to update a map display and perform reverse geocoding. It shows how to handle asynchronous geolocation data by storing the coordinates, latitude, longitude, and accuracy in component state, while also toggling a loading flag. The code relies on the browser’s `navigator.geolocation.getCurrentPosition` API with timeout and accuracy options, and includes error handling for denied or failed location requests. The rendering approach is not shown, but the geocoding step implies integration with a mapping library.

Aalexfinnarn
66% match
Loading thumbnail…

Gist fadcc73c7137e3e731b2dc5a98894add

This example demonstrates a geolocation service that retrieves the user’s current position and exposes it as an observable stream. The code uses Angular’s `@Injectable` decorator and RxJS `Observable.create` to wrap the browser’s `window.navigator.geolocation.getCurrentPosition` API, converting the raw `Coordinates` object (latitude, longitude, and accuracy) into a typed `Coordinates` model. It handles browser support and user rejection errors via a predefined error-message array, completing the observable after a successful position fix. The visualization focuses on the service logic rather than rendering, with no charting or drawing libraries involved.

Aackuser
62% match
Loading thumbnail…

Hook that listens for bounding box changes on a DOM element.

This example shows a React hook that tracks the bounding box of a DOM element and returns its updated width, height, x, and y coordinates. It uses the native `ResizeObserver` API to listen for size changes and `getBoundingClientRect()` to capture the element’s position and dimensions. The hook stores the rectangle in React state via `useState` and updates it through a `useEffect` that observes the element referenced by a `MutableRefObject`. The code is written in TypeScript and defines a `toRect` helper to normalize the `DOMRect` output, ensuring default values when the element is not yet available.

Aabonello
62% match
Loading thumbnail…

React Starter

This example shows how to fetch and display geospatial data in a React component. It loads a TopoJSON topology of world land from the `world-atlas` package using the Fetch API, then passes the result to React’s `useState` hook for storage. The `useEffect` hook triggers the asynchronous data retrieval, and the fetched topology is rendered as raw text inside a `<pre>` element. The code relies on React’s state and lifecycle management rather than any mapping or visualization library, so no chart is drawn.

MMaciek Sitkowski
60% match
Loading thumbnail…

Hook that makes a DOM element draggable.

This example shows a React hook that makes any DOM element draggable by handling mouse events. The hook returns a ref to attach to the target element and a mouse-down handler; when the user presses and drags, it computes the new position from the initial click offset and calls a provided `onMove` callback with the updated coordinates. It uses React’s `useRef`, `useState`, `useEffect`, and `useCallback`, attaching global `mousemove` and `mouseup` listeners while dragging. The code relies on `getBoundingClientRect` to calculate the offset, enabling smooth, frame-accurate movement without external libraries.

Aabonello
60% match
Loading thumbnail…

Hook that emits when the window has focus.

This example demonstrates a React hook that tracks whether the browser window currently has focus, returning a boolean value that updates in real time. It uses the `useState` and `useEffect` hooks from React to manage state and lifecycle events. The hook listens for the native `focus` and `blur` events on the `window` object, updating the state accordingly and cleaning up event listeners on unmount. It reads the initial focus state via `document.hasFocus()` and returns the current focus status, enabling components to react to visibility changes.

Aabonello
60% match
Loading thumbnail…

Hook that emits document visibility.

This example demonstrates a React hook that tracks whether the browser tab is currently visible to the user. It shows the document’s `visibilityState` and returns a boolean indicating if the page is in the foreground. The hook uses React’s `useState` and `useEffect` to initialize the state and subscribe to the `visibilitychange` event on the document. When the tab’s visibility changes, the event listener updates the state accordingly, and the effect cleans up the listener on unmount.

Aabonello
59% match
Loading thumbnail…

HTML5 GPS

This example shows a live GPS track on a Google Map, plotting the user’s current position with a custom marker whose icon updates as location accuracy improves. It uses the Google Maps JavaScript API and the browser’s `navigator.geolocation.watchPosition` method to continuously update the map center and zoom level based on reported precision. The code also accumulates a data log of latitude, longitude, accuracy, and elapsed time, which can be exported by clicking the marker.

KKirun1
59% match