location-picker skill

---
name: location-picker
description: >-
  Add a map location picker to a web form or web app with the location-picker npm package (the
  <location-picker> web component and the LocationPicker JavaScript class). Use it when a user must choose one
  precise latitude/longitude point on a map, such as a store, branch or sensor location, a delivery or pickup pin,
  an event venue, the place of a report or a home address, and the point must be submitted with a form, bound in
  React, Vue, Angular, Svelte, Solid or Preact, or written into hidden lat/lng inputs (Laravel, Django, Rails,
  jQuery, Livewire, Alpine, htmx). Covers the keyless OpenStreetMap default, Google Maps and MapLibre providers,
  address search, reverse geocoding, a locate-me button, parsing coordinates from text or map URLs, Content
  Security Policy, SSR and hydration, a phone-first field mode, the hosted pick link that asks a person for a
  location by URL, and upgrading location-picker 1.x or 2.x code (global locationPicker, getMarkerPosition,
  setCurrentPosition).
license: MIT
metadata:
  homepage: https://cyphercodes.github.io/location-picker/
  repository: https://github.com/cyphercodes/location-picker
---

# location-picker

`location-picker` captures one precise point: the user pans a map under a fixed centre pin (or searches, pastes coordinates, or taps "Use my location"), and the page gets `"lat,lng"`. It ships a form-associated custom element, `<location-picker>`, and an imperative class, `LocationPicker`. The default map is OpenStreetMap through Leaflet, with no API key.

Do not use it for drawing shapes or routes, several markers, a full mapping application, or text-only address autocomplete.

## Steps

1. **Pick the entry point.**
   - No bundler: `<script src="https://cdn.jsdelivr.net/npm/location-picker@3"></script>` (keep the `@3`). It defines `<location-picker>` and `window.LocationPicker`.
   - Bundler: `npm i location-picker`, then `import 'location-picker'` once in client code. It defines the element and is a no-op on the server.
   - Need the engine map synchronously, or no custom element: `import { LocationPicker } from 'location-picker/core'`.
2. **Wire the value.** In a form, use `name` (one `"lat,lng"` field), `lat-name` + `lng-name` (two fields), or `lat-input` + `lng-input` (fill inputs the page already has). In a framework, bind `value` and update state from `change` (committed); use `input` only to display live updates, and never write the value back from an `input` listener (in 3.0 that stops a pan in progress). Use the per-framework event names below.
3. **Choose the provider.** Leave it out for OpenStreetMap. For Google Maps add `provider="google" api-key="YOUR_BROWSER_KEY"`. For MapLibre, the project must provide `maplibre-gl` and its CSS.
4. **Choose the presentation.** Default inline (the map in the page). For checkout, delivery or sign-up forms that people fill in on phones, use `presentation="auto"`: a compact field with a "Choose on map" button on phones, the inline map elsewhere. In field mode `ready` resolves at the first open, so never gate the form on `el.ready`.
5. **Add features only when asked:** `search`, `reverse-geocode` (with `address-name` or `addresschange`), `locate="button"`, `required`, `center` and `zoom`.
6. **Check the result against "Common mistakes"** before you finish.

If the user has no code at all (WordPress, Webflow, Squarespace, Shopify, a Formspree or Netlify form), point them to the snippet generator at https://cyphercodes.github.io/location-picker/embed/ and the platform guide https://github.com/cyphercodes/location-picker/blob/master/docs/embed.md. If an agent or a bot only needs to ask a person for a location, use the pick link (below) instead of building a page.

## Plain HTML

<!-- prettier-ignore-start -->
```html
<!doctype html>
<html lang="en">