To help you get started, we've collected the most common ways that vue2-leaflet is being used within popular public projects.

yunity / karrot-frontend / src / maps / components / StandardMap.spec.js View on Github

it('renders markers with popups', async () => {
    const wrapper = mountWithDefaults(StandardMap, {
      propsData: {
        markers,
      },
    })
    await nextTicks(1)
    expect(wrapper.findAll(Vue2Leaflet.LMap).length).toBe(1)
    expect(wrapper.findAll(ExtendedMarker).length).toBe(markers.length)
    expect(wrapper.findAll(Vue2Leaflet.LPopup).length).toBe(markers.length)

    // add and remove some markers
    for (let i = 0; i < 3; i++) {
      wrapper.setProps({ markers: markers.filter((e, idx) => idx !== i) })
      await nextTicks(1)
      expect(wrapper.findAll(ExtendedMarker).length).toBe(markers.length - 1)
      expect(wrapper.findAll(Vue2Leaflet.LPopup).length).toBe(markers.length - 1)
    }
  })
})

View more ways to use vue2-leaflet

Vue2Leaflet

Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps.

How to install

npm install vue2-leaflet leaflet --save

For more detailed information you can follow the Quick Start Guide

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:

import Vue2Leaflet from 'vue2-leaflet'; // INVALID

And has been replaced by

import * as Vue2Leaflet from 'vue2-leaflet'; // VALID

Is highly suggested to import only the needed modules by doing so:

import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';

This will reduce the size of the bundle significantly

Documentation

Go here 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

Leaflet Plugins

Vue2Leaflet has a wide array of plugins written by the community! Check Here

Contribute

# 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

And all the rest who contributed

License

This project is licensed under the MIT License - see the LICENSE file for details