Vue 2 components for Leaflet maps

License: MIT

Language: JavaScript

Keywords: leaflet, map, vue, vuejs


Downloads Downloads Version License Gitter

Coverage Status

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

Image of Map

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 one breaking change:

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


Go here to check out live examples and docs.

If you want to hack around, here is a JS Fiddle to get started

Leaflet Plugins

Leaflet plugins can easily work with Vue2Leaflet, if you want to use one I would recommand to look at the awesome work made by the community in the list below.

Vue2Leafet plugins

If you have created a plugin and want it to be listed here, let me know :-).

Vue2Leaflet is only a wrapper for Leaflet. I want to keep it as simple as possible so I don't want to add any plugin support into this repo.

Run code locally for contributors

# clone the repository
git clone https://github.com/KoRiGaN/Vue2Leaflet.git
cd Vue2Leaflet
# install dependencies and build vue2-leaflet
npm install
# create a symlink for vue2-leaflet
yarn link
cd examples
yarn install
# create a symbolic link for vue2-leaflet in node_modules/
yarn link vue2-leaflet
# serve with hot reload at localhost:8080
yarn run serve

Go to http://localhost:8080/ to see running examples

NOTE: If you make changes to the library you should run 'npm run build' again in the root folder. The dev server should detect modification and reload the examples


Mickaël Bouchaud

Inspired by many map wrapper (google and leaflet) for many framework (React, Angular and Vue 1.0)


Thanks goes to these wonderful people


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

Project Statistics

Sourcerank 13
Repository Size 7.48 MB
Stars 1,030
Forks 256
Watchers 45
Open issues 28
Dependencies 1,775
Contributors 54
Tags 79
Last updated
Last pushed

Top Contributors See all

Nicolò Maria Mezzopera Mickaël bezany Michael Underwood bezany Michael Wolf Emanuele Bertoldi Jerico Pulvera Jerico Pulvera Drafu Julián Perelli Semen Levenson Fedor Baart anhnhoktvn javiertury Jesse Yang ij1 Paweł Świątkowski Jack Farley Madd.is

Packages Referencing this Repo

Vue2 leaflet library
Latest release 2.2.1 - Updated - 1.03K stars
Vue2 leaflet library
Latest release 1.3.9 - Updated - 1.03K stars
Vue2 leaflet library
Latest release 0.0.59 - Updated - 1.03K stars

Recent Tags See all

v2.2.1 July 24, 2019
v2.2.0 July 24, 2019
v2.1.1 April 25, 2019
v2.1.0 April 21, 2019
v2.0.4 April 20, 2019
v2.0.3 April 05, 2019
v2.0.2 March 03, 2019
v2.0.1 March 01, 2019
v2.0.0 February 28, 2019
v1.2.3 November 11, 2018
v1.2.3 November 11, 2018
v1.2.2 November 11, 2018
v1.2.1 November 08, 2018
v1.2.1 November 08, 2018
v1.2.0 November 08, 2018

Interesting Forks See all

Vue 2 components for Leaflet maps
Vue - MIT - Updated - 1 stars
Vue 2 components for Leaflet maps
Vue - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-07-24 07:56:01 UTC

Login to resync this repository