A component driven approach to managing Leaflet objects using Vue and Vuex.
npm install @vueaflet/coreA component driven approach to managing Leaflet objects using Vue and Vuex. Each component registers its Leaflet object in a Vuex store, allowing easy access to your Leaflet objects anywhere in your Vue application.
> BREAKING CHANGES from v0.6.0 to v1.0.0
- Import changed from vueaflet to @vueaflet/core and @vueaflet/esri
- VueafletBus now attached to root Vue instance
- Use this.$vueafletBus instead of import { VueafletBus } from 'vueaflet'
- Project is dependent on leaflet 1.3.3 above; use import * as Leaflet from 'leaflet'
- createVueafletStore is deprecated, see Getting Started
> BREAKING CHANGES going to v2.0.0
- leaflet needs to be installed separately
- Layers
- LGeoJsonLayer
- LGeoJsonCollection (handles multiple geo types)
- Vuex
- Still in development: Instead of using the tag-like syntax inside of a , you can simply pass a single Javascript object into Veuaflet do the rest! Documentation for shape of object coming soon.
- Misc
- Ordering z-index of panes using an order prop
- Leaflet.PM (drawing shapes on the map)
- Lots!
- esri-vueaflet: additional set of components inspired by esri-leaflet, that uses Vueaflet as a dependency.
- Hosted, practical examples
- Ensuring all "options" for each Leaflet UI layer are watched/reactive
- i.e. instead of setOpacity or setStyle, just change options.opacity
- Documentation for vueaflet store structure
- Layer controls to toggle basemaps and layers
- Evaluation of other Leaflet features that can be represented in component format
----------
npm install --save @vueaflet/core
yarn add @vueaflet/core
Assuming you are using a
template, your src/main.js will look something like this:
`
import Vue from 'vue'
import App from './App'
import store from 'store'
import Vueaflet from '@vueaflet/core'// attaches a 'vueaflet' module into your Vuex store
Vue.use(Vueaflet, { store })
new Vue({
el: '#app',
store,
template: '
components: { App }
})
NOTE: This library relies on Vuex in order to store your Leaflet objects.Quick Start Guide
These simple examples mirror the effort in the Leaflet Quick Start Guide. These examples use the single file component structure, loaded by
----------
$3
Create a new Vue component with a container :
`
----------
$3
When this plugin is ingested by Vue, , all vueaflet components are globally registered. Add a nested which takes a string prop called mapId. This string value becomes the div#id the Leaflet map will mount into:
`
You should have a blank, gray, tile-less map :) Now let's add a
component as a nested child to . The component accepts two props, urlTemplate and options. You'll notice this follows a similar interface as the Leaflet.tileLayer. All vueaflet components aspire to have a similar pattern; utilizing the same instantiating signature used to create its corresponding Leaflet object. Here's the code snippet:
`
Let's so we can start creating some layers. This is where Vuex comes into play; let's look at some code and then explain:
`
When the component mounted, it added the Leaflet map object to a Vuex store. Documentation on the shape of the Vueaflet store coming soon. Here are some other ways to get the map object from the store:
`
...mounted() {
this.$store.state.vueaflet.maps[this.mapId].setView([51.505, -0.09], 13)
}
...
Woo hoo! You should now see a map hovering over a place in London.Before we move on, we'd like to mention the purpose of this library is solely to make it easier to "create" and "get" your Leaflet objects. Notice how our
component doesn't contain props to setView, rather gives you an interface to: - Create the
Leaflet.map object
- Fetch the Leaflet.map object using the Vuex interface
Once you have the object... use it! All the Leaflet options and methods are at your disposal. However, there are some features that we provide an easy interface to. See popups belows.----------
$3
Easily add other layers to your map! Let's add a marker:
`
Adding a circle and polygon are fairly similar:
...
...
...
markerProps: { latlng: [51.5, -0.09] },
circleProps: {
latlng: [51.508, -0.11],
options: {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}
},
polygonProps: {
latlng: [
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
],
}
...
----------
$3
Simply pass a string to the prop on each of these simple layer types:
`
...
...
Each layer a ready status.----------
$3
`
...
...
polylineProps: {
latlng: [
[51.518, -0.1124],
[51.522, -0.0890],
[51.518, -0.0556]
],
options: { color: 'red' }
},
rectangleProps: {
latlng: [[51.496, -0.115], [51.489, -0.102]],
options: {color: "#ff7800", weight: 1}
},
multiPolylineProps: {
latlng: [
[[51.495, -0.0705], [51.489, -0.058]],
[[51.488, -0.07084], [51.498, -0.0506]]
],
options: { color: 'blue' }
}
----------
$3
Pass in an array events (as strings) that are supported by the layer type. See Leaflets docs for events. There is a "ready" event that is handle by Vueaflet for you :). Each Leaflet supported event back an { event, layer } object:
`
...
v-on:dragend="handleMarkerDragEnd"/>
...
Additionaly, you can pass a boolean prop called which will also attach each event passed in the array of events to property attached to each component as this.$vueafletBus. More on that soon...Couple of things to note:
-
v-on:ready occurs on all layers, custom to Vueaflet
- The draggable options is not part of the Leaflet.marker api. This implementation is specific to Vueaflet and currently only supported on Markers.----------
$3
Wrap the layers we created in previous examples in the component. Make sure to include a layer-name prop for your feature group:`
v-on:ready="handleMarkerReady"
v-on:dragend="handleMarkerDragEnd"/>
The nested layer components are injected with a data prop informing the lifecycle method to "add to parent" instead of "add to map". In other terms, Leaflet.featureGroup().addLayer(marker) instead of Leaflet.marker().addTo(map).Now you can toggle that feature layer without using
Leaflet.control:
`
...
----------
$3
We've already provided an example for how to utilize the store for retrieving the map object. You can achieve the same functionality for an . By passing the feature group component a layer-name prop, you are also storing this Leaflet.featureGroup object in the vueaflet store using the layer-name as the object key. You can access that feature group like so:
`
/ layerName being the string prop passed to l-feature-group /
this.$store.state.vueaflet.namedLayers[layerName]
Here is a separate single file component that is part of the same example app. This is to showcase how these Leaflet objects can stretch across your entire app. This example uses a vueaflet to access and manipulate the feature group object created in ./App.vue:
`
Meanwhile in the other component:
...
...