A polyfill for the <geolocation> element
npm install geolocation-element-polyfill element polyfillA drop-in JavaScript polyfill for the HTML element. It provides
a declarative, privacy-conscious interface for the Geolocation API with built-in
form participation and UI.
Check out the live demo.
- Declarative HTML: Use tags directly in your markup.
- Privacy-First Autolocate: The autolocate attribute only runs if
permissions were _already_ granted, preventing unexpected popups.
- Built-in UI: Renders a "Use location" / "Use precise location" button
automatically.
- Form Native: Implements ElementInternals to act as a native form input.
Submits JSON-serialized coordinate data automatically.
- Attributes: Supports watch, accuracymode ("precise" vs
"approximate"), and inline onlocation handlers.
``bash`
npm install geolocation-element-polyfill
`javascript`
import 'geolocation-element-polyfill';
Simply include the script at the end of your body tag:
`html`
Just drop the tag into your HTML. The polyfill will replace it with a functional
Custom Element () rendering a button.
`html`
accuracymode="precise"
>
The element functions like a hidden . When the user enables location,
the element stores the data internally. When the form is submitted, it includes
the location data as a JSON string.
`html
`
| Attribute | Value | Description |
| -------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
| autolocate | Boolean | If present, attempts to fetch location immediately on load. Note: Only runs if permission state is 'granted'. |accuracymode
| | "approximate" or "precise" | Determines the precision of the location data. |watch
| | Boolean | If present, uses watchPosition() to continuously update coordinates as the user moves. |onlocation
| | Script | Inline event handler string. |name
| | String | The name of the field when submitted within a