{"id":26127589,"url":"https://github.com/inventage/leaflet-map","last_synced_at":"2026-03-14T11:33:06.881Z","repository":{"id":57119031,"uuid":"282875197","full_name":"inventage/leaflet-map","owner":"inventage","description":"A web component for displaying a map with certain features using Leaflet.","archived":false,"fork":false,"pushed_at":"2021-09-16T07:58:31.000Z","size":4360,"stargazers_count":5,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T17:16:58.010Z","etag":null,"topics":["leaflet","leaflet-map","lit-element","lit-html","map","open-wc","storybook","typescript","web-components","webcomponents"],"latest_commit_sha":null,"homepage":"http://inventage.github.io/leaflet-map/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inventage.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-27T11:18:23.000Z","updated_at":"2023-12-21T01:28:03.000Z","dependencies_parsed_at":"2022-08-23T21:21:14.664Z","dependency_job_id":null,"html_url":"https://github.com/inventage/leaflet-map","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inventage%2Fleaflet-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inventage%2Fleaflet-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inventage%2Fleaflet-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inventage%2Fleaflet-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inventage","download_url":"https://codeload.github.com/inventage/leaflet-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248750008,"owners_count":21155682,"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","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":["leaflet","leaflet-map","lit-element","lit-html","map","open-wc","storybook","typescript","web-components","webcomponents"],"created_at":"2025-03-10T18:09:03.545Z","updated_at":"2026-03-14T11:33:01.846Z","avatar_url":"https://github.com/inventage.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cimg src=\"media/undraw_Map_light_3hjy.svg\" width=\"200\" alt=\"undraw.co map illustration\"\u003e\n  \u003cbr\u003e\n  \u003ch1\u003e\u0026#x3C;leaflet-map\u0026#x3E;\u003c/h1\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\nA web component for displaying a map with certain features using [Leaflet].\n\n[![made with open-wc](https://img.shields.io/badge/made%20with-open--wc-%23217ff9?style=flat-square)](https://open-wc.org)\n[![Main Workflow](https://img.shields.io/github/workflow/status/inventage/leaflet-map/Main%20Workflow?style=flat-square)](https://github.com/inventage/leaflet-map/actions?query=workflow%3A\"Main+Workflow\")\n[![npm version](https://img.shields.io/npm/v/@inventage/leaflet-map?style=flat-square)](https://www.npmjs.com/package/@inventage/leaflet-map)\n\n## Installation\n\n```bash\nnpm i @inventage/leaflet-map\n```\n\n## Usage\n\n```html\n\u003cscript type=\"module\"\u003e\n  import '@inventage/leaflet-map';\n\u003c/script\u003e\n\n\u003cleaflet-map\u003e\u003c/leaflet-map\u003e\n```\n\n## Example\n\nhttps://inventage-leaflet-map.glitch.me/\n\n## Properties\n\n| Property              | Attribute             | Type                        | Default  |\n| --------------------- | --------------------- | --------------------------- | -------- |\n| `defaultZoom`         | `defaultZoom`         | `number`                    | 16       |\n| `detectRetina`        | `detectRetina`        | `boolean`                   | true     |\n| `latitude`            | `latitude`            | `number`                    | 47.38991 |\n| `longitude`           | `longitude`           | `number`                    | 8.51604  |\n| `markers`             | `markers`             | `MarkerInformation[]`       | []       |\n| `maxZoom`             | `maxZoom`             | `number`                    | 19       |\n| `radius`              | `radius`              | `number`                    | 0        |\n| `selectedMarker`      | `selectedMarker`      | `MarkerInformation \\| null` | null     |\n| `updateCenterOnClick` | `updateCenterOnClick` | `boolean`                   | false    |\n\n## Events\n\n| Event            | Type                                                    | Description                                                                                                                     |\n| ---------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| `center-updated` | `CustomEvent\u003c{ latitude: number; longitude: number; }\u003e` | Event transporting the latitude and longitude each time the map center has updated.                                             |\n| `map-ready`      | `CustomEvent\u003c{ map: Map; }\u003e`                            | Event transporting an leaflet map instance. Fires using the `whenReady` event of leaflet map.                                   |\n| `tiles-loading`  | `CustomEvent\u003c{ promise: Promise\u003cvoid\u003e; }\u003e`              | Event transporting a promise, fires when the tiles layer starts loading tiles. The promise resolves once all tiles have loaded. |\n\n## CSS Custom Properties\n\n| Property                   | Type   | Description                    | Default |\n| -------------------------- | ------ | ------------------------------ | ------- |\n| `--leaflet-map-min-height` | Length | Min. height of the map element | `50vh`  |\n\n[leaflet]: https://leafletjs.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finventage%2Fleaflet-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finventage%2Fleaflet-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finventage%2Fleaflet-map/lists"}