{"id":13701475,"url":"https://github.com/brandonxiang/vueleaflet","last_synced_at":"2025-05-07T17:49:35.292Z","repository":{"id":57158823,"uuid":"57289642","full_name":"brandonxiang/vueleaflet","owner":"brandonxiang","description":"Vue components for Leaflet maps","archived":false,"fork":false,"pushed_at":"2023-12-06T02:07:52.000Z","size":2298,"stargazers_count":191,"open_issues_count":3,"forks_count":45,"subscribers_count":13,"default_branch":"next","last_synced_at":"2025-04-23T03:17:36.580Z","etag":null,"topics":["components","leaflet-map","vite","vitejs","vue","vue-components","vue-leaflet"],"latest_commit_sha":null,"homepage":"https://vueleaflet.brandonxiang.top","language":"Vue","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/brandonxiang.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-04-28T09:43:05.000Z","updated_at":"2025-04-17T08:14:55.000Z","dependencies_parsed_at":"2024-04-13T00:55:49.688Z","dependency_job_id":null,"html_url":"https://github.com/brandonxiang/vueleaflet","commit_stats":null,"previous_names":["brandonxiang/vue-leaflet"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonxiang%2Fvueleaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonxiang%2Fvueleaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonxiang%2Fvueleaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonxiang%2Fvueleaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandonxiang","download_url":"https://codeload.github.com/brandonxiang/vueleaflet/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931385,"owners_count":21827104,"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":["components","leaflet-map","vite","vitejs","vue","vue-components","vue-leaflet"],"created_at":"2024-08-02T20:01:41.042Z","updated_at":"2025-05-07T17:49:35.273Z","avatar_url":"https://github.com/brandonxiang.png","language":"Vue","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-leaflet\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/brandonxiang/vueleaflet/blob/master/LICENSE\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/license/brandonxiang/vueleaflet\" alt=\"license\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://npmjs.org/package/vueleaflet\" alt=\"npm version\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/vueleaflet.svg\" /\u003e\n    \u003c/a\u003e\n        \u003ca href=\"https://npmjs.org/package/vueleaflet\" alt=\"npm version\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dw/vueleaflet\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://twitter.com/intent/follow?screen_name=xwpisme\"\u003e\n        \u003cimg src=\"https://img.shields.io/twitter/follow/xwpisme?style=social\u0026logo=twitter\"\n            alt=\"follow on Twitter\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nHere is Vue components for Leaflet maps, which is inspired by [react-leaflet](https://github.com/PaulLeCam/react-leaflet) and [vue-google-maps](https://github.com/GuillaumeLeclerc/vue-google-maps).\n\n\u003e A vue component for leaflet.js\n\nThis library is compatible with vue 3.0, and leaflet 1.9.x.\n\n## Installation\n\n```bash\nnpm install vueleaflet vue leaflet -save\n```\n\n## Startup\n\nYou can input some Vue-styled components in a .vue file in order to use leaflet.js, like [Layout.vue](src/Layout.vue).\n\n```html\n\u003cl-map\n  id=\"map1\"\n  :options=\"{\n    zoom: 13,\n    center: { lat: 51.505, lng: -0.09 },\n    minZoom: 8,\n    maxZoom: 15,\n    attributionControl: true,\n    zoomControl: true\n  }\"\n\u003e\n  \u003cl-tilelayer\n    urlTemplate=\"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}\"\n    :options=\"{\n        attribution: 'vue-leaflet',\n        maxZoom: 18,\n        id: 'mapbox/streets-v11',\n        tileSize: 512,\n        zoomOffset: -1,\n        accessToken: 'pk.eyJ1IjoieHdwaXNtZSIsImEiOiJ5cTlCQTlRIn0.QdV-wNUKbgs7jAlbVE747Q'\n      }\"\n  /\u003e\n  \u003cl-marker\n    :latlng=\"{ lat: 51.505, lng: -0.09 }\"\n    :options=\"{\n      title: 'marker1',\n      opacity: 1,\n      draggable: true\n    }\"\n  \u003e\n    \u003cl-tooltip :options=\"{ content: 'tooltip with marker1' }\" /\u003e\n  \u003c/l-marker\u003e\n  \u003cl-marker\n    :latlng=\"{ lat: 51.505, lng: -0.11 }\"\n    :options=\"{\n      title: 'marker2'\n    }\"\n  \u003e\n    \u003cl-popup :options=\"{ content: 'popup with marker2' }\" /\u003e\n  \u003c/l-marker\u003e\n  \u003cl-tooltip\n    :options=\"{ content: 'tooltip standalone' }\"\n    :latlng=\"{ lat: 51.505, lng: 0 }\"\n  /\u003e\n  \u003cl-popup\n    :options=\"{ content: 'popup standalone' }\"\n    :latlng=\"{ lat: 51.505, lng: 0 }\"\n  /\u003e\n  \u003cl-circle\n    :latlng=\"[51.508, -0.11]\"\n    :options=\"{\n      color: 'red',\n      fillColor: '#f03',\n      fillOpacity: 0.5,\n      radius: 500\n    }\"\n  /\u003e\n  \u003cl-polygon\n    :latlng=\"[\n      [51.509, -0.08],\n      [51.503, -0.06],\n      [51.51, -0.047]\n    ]\"\n  /\u003e\n\u003c/l-map\u003e\n```\n\n## Build Setup\n\n```bash\n# serve the example\nnpm run dev\n\n# build the library\nnpm run build\n\n# build the example\nnpm run build: example\n\n```\n\n## Contribute\n\nPR Welcome\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonxiang%2Fvueleaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandonxiang%2Fvueleaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonxiang%2Fvueleaflet/lists"}