Vue2Leaflet

Vue2 component that helps with leaflet interaction

How to display a map with a marker

Register Map and TileLayer components from Vue2Leaflet

Vue.component('v-map', Vue2Leaflet.Map);
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
Vue.component('v-marker', Vue2Leaflet.Marker);

Add the map to your page

<div id="app" style="height: 100%">
  <v-map :zoom=13 :center="[47.413220, -1.219482]">
    <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
    <v-marker :lat-lng="[47.413220, -1.219482]"></v-marker>
  </v-map>
</div>

new Vue({ el: '#app'});

Make sure the leaflet.css is included, either via a HTML link tag or in your vue component style

@import "~leaflet/dist/leaflet.css";

Here is the result

Live Demo here

More live demos will come soon

If you want to try it here is a JS Fiddle Hello Map of the World

How to install

$ npm install vue2-leaflet --save

List of currently implemented components

• Map
• Marker
• Popup
• Tooltip
• TileLayer
• TileLayer.WMS
• ImageOverlay
• Polyline
• Polygon
• Rectangle
• Circle
• CircleMarker
• LayerGroup
• FeatureGroup
• GeoJSON

Build Setup

# Once you have cloned this repo, install dependencies
$ npm install

# build for development and production with minification
$ npm run build

Run demo locally

# Run demo at localhost:8080
$ npm link
$ cd examples
$ npm link vue2-leaflet
$ npm install
# serve with hot reload at localhost:8080
$ npm run dev

Go to http://localhost:8080/ to see a some 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 demo

Authors

Mickaël Bouchaud

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

Contributors

Thanks goes to these wonderful people:

• @zuck
• @SiggyF
• @nikos
• @Ralf8686
• @antixrist

License

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