Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vue-leaflet/Vue2Leaflet
Vue 2 components for Leaflet maps
https://github.com/vue-leaflet/Vue2Leaflet
leaflet map vue vuejs
Last synced: 17 days ago
JSON representation
Vue 2 components for Leaflet maps
- Host: GitHub
- URL: https://github.com/vue-leaflet/Vue2Leaflet
- Owner: vue-leaflet
- License: mit
- Created: 2016-10-04T20:47:13.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-01T20:01:55.000Z (9 months ago)
- Last Synced: 2024-05-30T04:21:45.216Z (6 months ago)
- Topics: leaflet, map, vue, vuejs
- Language: JavaScript
- Homepage: https://vue2-leaflet.netlify.com/
- Size: 10.5 MB
- Stars: 1,951
- Watchers: 39
- Forks: 380
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue2Leaflet
[](#contributors-)
Vue2Leaflet is a JavaScript library for the [Vue](https://vuejs.org/) framework that wraps [Leaflet](http://leafletjs.com/) making it easy to create reactive maps.
## How to install
```bash
npm install vue2-leaflet leaflet --save
```
For more detailed information you can follow the [Quick Start Guide](https://vue2-leaflet.netlify.app/quickstart/)
## Breaking change from 1.x.x to 2.x.x
A new major release 2.0.0 is available and come with two breaking changes:
### Leaflet is not automatically installed anymore
Leaflet is now a peerDependency and need to be installed manually, we updated our docs to reflect this but please pay attention when migrating
### Importing the library in Webpack / Rollup
Now the code of vue2-leaflet is split component by component (while using a bundler like Webpack/Rollup/Parcel) to do so the following syntax is not working anymore:
```javascript
import Vue2Leaflet from 'vue2-leaflet'; // INVALID
```
And has been replaced by
```javascript
import * as Vue2Leaflet from 'vue2-leaflet'; // VALID
```
Is highly suggested to import only the needed modules by doing so:
```javascript
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
```
This will reduce the size of the bundle significantly
## Documentation
[Go here](https://vue2-leaflet.netlify.app/) to check out live examples and docs.
## Support & Community
Do you have questions? Ideas? do you want to collaborate but you feel lost? Join us on discord [Invite Link](https://discord.gg/uVZAfUf)
## Leaflet Plugins
Vue2Leaflet has a wide array of plugins written by the community! [Check Here](https://vue2-leaflet.netlify.app/plugins/)
## Contribute
```bash
# clone the repository
git clone https://github.com/vue-leaflet/Vue2Leaflet.git
cd Vue2Leaflet
# install dependencies and build vue2-leaflet
npm install
# Compile the source and start the documentation server
npm run dev
```
Go to to see the docs and the examples
Any changes to the source code is reflected in the docs after a handfuls of seconds.
## Authors
- Mickaël Bouchaud
- Nicolò Maria Mezzopera
Inspired by many map wrapper (google and leaflet) for many framework (React, Angular and Vue 1.0)
## Contributors
Nicolò Maria Mezzopera
💻 🚧 📖
Mickaël
💻 🚧
bezany
💻
Michael Underwood
💻
Michael Wolf
💻
Emanuele Bertoldi
💻
javiertury
💻
ECO
💻
Udo Schochtert
🐛
Yaman Ozakin
🐛
Andre-John Mas
📖 💻
George Pickering
📖
Jake Potrebic
💻
itanka9
📖 💻
bravik
📖
Pierre Grimaud
📖
Andrei Rosca
💻
> If you believe you should be on this list please add yourself by typing this on a PR or issue: `@all-contributors please add @yourNickname for X` where X is one of [all-contributors emojoi keys](https://allcontributors.org/docs/en/emoji-key)
And all [the rest who contributed](https://github.com/vue-leaflet/Vue2Leaflet/contributors)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details