Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps.
To have a fully working setup with Vue leaflet, you need to import Leaflet package as long as the vue2-leaflet package.
$ npm install leaflet --save
$ npm install vue2-leaflet --save
In your index.js, import leaflet and his styles.
import 'leaflet'
import 'leaflet/dist/leaflet.css'
To setup a simple map, import the required components in your single component file.
import { LMap, LTileLayer } from 'vue2-leaflet';
export default {
components: {
LMap,
LTileLayer
},
data () {
return {
zoom: 13,
center: L.latLng(47.413220, -1.219482),
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}
}
}
Then you can use your map in your component
<l-map style="height: 90%" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
</l-map>
Because you've imported Leaflet in your main.js, Leaflet is exposed through the
window.L
(or justL
) API.
Go here to check out live examples and docs.
If you want to hack around, here is a JS Fiddle to get started
As some component where conflicting with reserved name like Circle with SVG Circle, from v1.x.x all components are prefixed with L.
For example Marker component became LMarker (l-marker in template).
Event handling have been simplified and are now mapped directly to Leaflet event.
For example Marker move event was 'l-move' and became simply 'move'.
v1.0.0 introduces Leaflet Controls you can now use them using LControlAttribution, LControlLayers, LControlScale and LControlZoom.
When adding LControlAttribution or LControlZoom to your template, remember to desactivate the default one by using LMap options:
{
zoomControl: false,
attributionControl: false
}
Otherwise you will end up with two zoom/attribution control.
For more detailed informations you can follow the Quick Start Guide
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.
- vue2-leaflet-markercluster wrapper for MarkerCluster
- vue2-leaflet-polylinedecorator wrapper for PolylineDecorator
- vue2-leaflet-googlemutant wrapper for GoogleMutant
- vue2-leaflet-tracksymbol wrapper for TrackSymbol
- vue-choropleth to display a choropleth map given a certain GeoJSON
- vue2-leaflet-geosearch wrapper for GeoSearch
- vue2-leaflet-vectorgrid wrapper for VectorGrid to display gridded vector data
- vue2-leaflet-rotatedmarker wrapper for RotatedMarker
- vue2-leaflet-editablecirclemarker wrapper for leaflet-editablecirclemarker
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.
First add a ref to the map
<l-map ref="map" :zoom=13 :center="[47.413220, -1.219482]">
...
</l-map>
Then in you JavaScript you can use mapObject which is Leaflet map instance :
this.$refs.map.mapObject;
This also work for any other component (Marker, Polyline, etc...)
All event binding can be done to event with the same name as in leaflet documentation.
For example if you want to listen to Vue2Leaflet.LMarker move event.
<l-marker :lat-lng="[47.413220, -1.219482]" @move="doSomething"></l-marker>
# clone the repository
$ git clone git@github.com:KoRiGaN/Vue2Leaflet.git
$ cd Vue2Leaflet
# install dependencies and build vue2-leaflet
$ npm install
$ npm run build
# create a symlink for vue2-leaflet
$ npm link
$ cd examples
$ npm install
# create a symbolic link for vue2-leaflet in node_modules/
$ npm link vue2-leaflet
# serve with hot reload at localhost:8080
$ npm run dev
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