Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps.
npm install vue2-leaflet leaflet --saveFor more detailed information you can follow the Quick Start Guide
A new major release 2.0,0 is available and come with one breaking change:
Leaflet is now a peerDependency and need to be installed manually, we updated our docs to reflect this but please pay attention when migrating
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' // INVALIDAnd has been replaced by
import * as Vue2Leaflet from 'vue2-leaflet' // VALIDIs 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 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.
- vue-choropleth to display a choropleth map given a certain GeoJSON
- vue2-leaflet-axesgrid wrapper for AxesGrid to display axes and a grid
- vue2-leaflet-editablecirclemarker wrapper for leaflet-editablecirclemarker
- vue2-leaflet-geosearch wrapper for GeoSearch to perform geolocation and address lookup
- vue2-leaflet-googlemutant wrapper for GoogleMutant to use Google Maps layers
- vue2-leaflet-gpx wrapper for leaflet-gpx to display GPX tracks
- vue2-leaflet-hotline wrapper for hotline to colour a line based on values along its length
- vue2-leaflet-locatecontrol wrapper for Leaflet.Locate to find the location of the user
- vue2-leaflet-markercluster wrapper for MarkerCluster to group nearby markers into single clusters
- vue2-leaflet-movingmarker wrapper for Leaflet.Marker.SlideTo to animate the movement of markers
- vue2-leaflet-path-transform wrapper for Leaflet.Path.Transform to allow the user to drag, rotate, and resize vector features
- vue2-leaflet-polygonfillpattern wrapper for leaflet-polygon-fillPattern to fill polygons with image patterns
- vue2-leaflet-polyline-measure wrapper for Leaflet.PolylineMeasure to allow the user to measure distances on the map
- vue2-leaflet-polylinedecorator wrapper for PolylineDecorator to draw lines using patterns such as dashes, arrows, and icons
- vue2-leaflet-rotatedmarker wrapper for RotatedMarker to rotate marker icons to dynamic headings
- vue2-leaflet-tracksymbol wrapper for TrackSymbol to show track symbols with speed, course, and heading
- vue2-leaflet-vectorgrid wrapper for VectorGrid to display gridded vector data
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.
# 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 serveGo 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