{"id":28882866,"url":"https://github.com/nonsalant/map-picker","last_synced_at":"2026-03-17T13:38:38.257Z","repository":{"id":300219015,"uuid":"1000938093","full_name":"nonsalant/map-picker","owner":"nonsalant","description":"Web component that produces a map for a location picker","archived":false,"fork":false,"pushed_at":"2025-08-02T13:28:11.000Z","size":236,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-06T12:45:12.545Z","etag":null,"topics":["location","map","vanilla-javascript","web-components"],"latest_commit_sha":null,"homepage":"https://codepen.io/nonsalant/pen/ZYGoJab","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nonsalant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-12T14:51:52.000Z","updated_at":"2025-08-02T13:28:14.000Z","dependencies_parsed_at":"2025-06-20T13:46:04.781Z","dependency_job_id":"43126036-cede-4f6c-830c-7c7d89cf461b","html_url":"https://github.com/nonsalant/map-picker","commit_stats":null,"previous_names":["nonsalant/map-picker"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nonsalant/map-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Fmap-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Fmap-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Fmap-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Fmap-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nonsalant","download_url":"https://codeload.github.com/nonsalant/map-picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Fmap-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019061,"owners_count":26086512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["location","map","vanilla-javascript","web-components"],"created_at":"2025-06-20T21:02:01.536Z","updated_at":"2025-10-14T11:13:03.793Z","avatar_url":"https://github.com/nonsalant.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# map-picker\nThe web component takes a CSS selector for a “Confirm Location” button via the `confirm` attribute, e.g:\n```js\n\u003cmap-picker confirm=\"#confirm-location\"\u003e\u003c/map-picker\u003e\n```\n\nWhen clicked this button dispatches a `map-picker-confirm` event on the document (or on the `RootNode`) with the following data inside the event object: `{latitude, longitude, address}`\n\nAdditionally, when the map is clicked (or the \u003cknd\u003eSpace\u003c/knd\u003e button is pressed) a marker (pin) is placed on the map and a `map-picker-marker-set` event is dispatched on the document (or on the `RootNode`) with the following data inside the event object: `{latitude, longitude, address}`\n\nWorks inside the Light DOM or inside another web component’s Shadow DOM. \n\n## Demos from CodePen\n* [Map for location picker](https://codepen.io/nonsalant/pen/ZYGoJab)\n* [Map inside a modal (popover)](https://codepen.io/nonsalant/pen/LEVmjQz)\n\n## Importing the component files\n\n### Importing the component from a CDN\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/map-picker-component/map-picker.css\"\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/map-picker-component/map-picker.js\"\u003e\u003c/script\u003e\n```\n\n### Importing the component from local files\n```html\n\u003clink rel=\"stylesheet\" href=\"./map-picker/map-picker.css\"\u003e\n\u003cscript type=\"module\" src=\"./map-picker/map-picker.js\"\u003e\u003c/script\u003e\n```\n\nNote: by default the [Leaflet](https://github.com/Leaflet/Leaflet) script and style will be dynamically included from local minified files in the `vendor-leaflet` folder.\n\nIf you'd like to load the Leaflet files from a CDN (and not minified) you should edit the map-picker.js file by commenting out 3 lines and uncommenting the other 3 at the top of the file:\n\n```js\nlet Leaflet; // Will be imported dynamically in connectedCallback()\n\n/* 🏠 Local version */\n// const BASE_URL = import.meta.resolve('./vendor-leaflet/');\n// const LEAFLET_SCRIPT = 'leaflet-src.esm.min.js';\n// const LEAFLET_STYLESHEET = 'leaflet.min.css';\n\n/* 🔗 CDN version */\nconst BASE_URL = 'https://unpkg.com/leaflet@1.9.4/dist/';\nconst LEAFLET_SCRIPT = 'leaflet-src.esm.js';\nconst LEAFLET_STYLESHEET = 'leaflet.css';\n```\nIf you do this, you can also remove the `vendor-leaflet` folder from your project, as you will only need the `map-picker.js` and `map-picker.css` files (as in the CodePen examples linked above).\n\n## Usage\n\n### Add the map-picker element to your HTML:\n```html\n\u003cmap-picker \n\tconfirm=\".confirm-location\" \n\tinitial-coordinates=\"39.8283,-98.5795\"\n\tinitial-zoom=\"4\"\n\u003e\u003c/map-picker\u003e\n```\n\n### Add the confirm button to your HTML:\nNote: don't put this inside the `\u003cmap-picker\u003e` element. \n```html\n\u003cbutton class=\"confirm-location\" type=\"button\"\u003e\n    \u003cspan aria-hidden=\"true\"\u003e✅\u003c/span\u003e \u003cspan\u003eConfirm Location\u003c/span\u003e\n\u003c/button\u003e\n```\n\n### Handle the `map-picker-confirm` event in your JavaScript\nThis can be done in a JavaScript file:\n```js\ndocument.addEventListener('map-picker-confirm', (event) =\u003e {\n    const { latitude, longitude, address } = event.detail;\n    console.log(`Location confirmed: ${latitude}, ${longitude} - ${address}`);\n});\n```\n...or inline in your HTML:\n```html\n\u003cscript type=\"module\"\u003e\ndocument.addEventListener('map-picker-confirm', (event) =\u003e {\n    const { latitude, longitude, address } = event.detail;\n    console.log(`Location confirmed: ${latitude}, ${longitude} - ${address}`);\n});\n\u003c/script\u003e\n\n\u003cmap-picker confirm=\".confirm-location\"\u003e\u003c/map-picker\u003e\n```\n\n## Attributes for the `\u003cmap-picker\u003e` element\n\n| Attribute              | Default Value        | Description                                                             |\n|------------------------|----------------------|-------------------------------------------------------------------------|\n| `confirm`              | `\"\"`                 | CSS selector for the “Confirm Location” button(s).                      |\n| `reset`                | `\"\"`                 | CSS selector for the “Reset Map” button(s).                             |\n| `initial-coordinates`  | `\"39.8283,-98.5795\"` | Initial coordinates to center the map view in the format `latitude,longitude` (no spaces). Defaults to USA. |\n| `initial-zoom`         | `\"4\"`                | Initial zoom level for the map.                                         |\n| `marker-coordinates`   | `undefined`          | Coordinates for an initial marker in the format `latitude,longitude` (no spaces). If not set, no marker will be initially shown. |\n| `map-autofocus`        | `undefined`          | Doesn't need a value. If this attribute is present the map will be focused when the it becomes visible. Useful when opening the map in a modal. |\n| `shadow-root-host`     | `undefined`          | If this attribute is present, the script will look for the \"Confirm Location\" and \"Reset Map\" buttons inside the Shadow DOM of the element with this selector and the events will be dispatched directly on the shadowRoot of that element. |\n| `host`                 | `undefined`          | If this attribute is present, the script will look for the \"Confirm Location\" and \"Reset Map\" buttons inside the Light DOM of the element with this selector and the events will be dispatched directly on that element. If not set the button(s) are assumed to be anywhere in the body. Is ignored if `shadow-root-host` is also set. |\n\n\n## Events\n\n### `map-picker-confirm`\nThis event is dispatched when the user clicks the “Confirm Location” button(s) (defined by a CSS selector in the `confirm` attribute).\n\nThe event object looks like this:\n```json\n{\n  \"lat\": \"39.842286\",\n  \"lng\": \"-98.613281\",\n  \"address\": \"120 Road, Smith County, Kansas, 66952, United States\"\n}\n```\nExample implementation:\n```js\ndocument.addEventListener('map-picker-confirm', (event) =\u003e {\n    const { lat, lng, address } = event;\n    console.log(`Location confirmed: ${lat}, ${lng} - ${address}`);\n});\n```\n\n### `map-picker-reset`\nThis event is dispatched when the user clicks the “Reset Map” button(s) (defined by a CSS selector in the optional `reset` attribute). \n\nExample implementation:\n```js\ndocument.addEventListener('map-picker-reset', (event) =\u003e {\n    console.log('Location reset');\n});\n```\n\n## `map-picker-marker-set`\nThis event is dispatched when the user sets a marker on the map by clicking on it. The event object looks like this:\n```json\n{\n  \"lat\": \"39.842286\",\n  \"lng\": \"-98.613281\",\n  \"address\": \"120 Road, Smith County, Kansas, 66952, United States\"\n}\n```\nExample implementation:\n```js\ndocument.addEventListener('map-picker-marker-set', (event) =\u003e {\n    const { lat, lng, address } = event.detail;\n    console.log(`Marker set: ${lat}, ${lng} - ${address}`);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnonsalant%2Fmap-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnonsalant%2Fmap-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnonsalant%2Fmap-picker/lists"}