A component driven approach to managing Leaflet objects using Vue and Vuex.
npm install @vue-mapp-kit/leafletA component driven approach to managing Leaflet objects using Vue. Each component supported in this library has an almost identical interface to each respective class in Leaflet.
FeatureCollectioncd into /packages/leaflet-examples and run yarn install && yarn serve----------
----------
vue-loader.Import components as UMD:
``
import { LMap, LMarker } from '@vue-mapp-kit/leaflet'
Import individual components:
`
import LMap from '@vue-mapp-kit/leaflet/LMap/LMap'
import LMarker from '@vue-mapp-kit/leaflet/ui/LMarker/LMarker'
See the lib directory after adding this package to your node_modules for other import paths.
npm install --save leaflet @vue-mapp-kit/leaflet
yarn add leaflet @vue-mapp-kit/leaflet
Assuming you are using a
template, your src/main.js will look something like this:
`
import Vue from 'vue'
import App from './App.vue'
import MappKitLeaflet from '@vue-mapp-kit/leaflet'Vue.use(MappKitLeaflet)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
$3
The consumer is also responsible for importing the Leaflet styles:
@import "leaflet/dist/leaflet.css"
Quick Start Guide
These simple examples mirrors 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
Import and add which takes a string prop called mapId and object props called options. You'll notice this follows a similar interface as the Leaflet.map. All MappKitLeaflet components aspire to have a similar pattern; utilizing the same instantiating signature used to create its corresponding Leaflet object. map-id string value becomes the div#id the Leaflet map will mount into:
`
:options="{
center: [51.505, -0.09],
zoom: 13
}"
/>
You should have a blank, gray, tile-less map :) The component uses the Vue provide/inject in order to add nested children to the map.Now let's add a
component as a nested child to . The component accepts two props, urlTemplate and options:
`
:options="{
center: [51.505, -0.09],
zoom: 13
}"
>
:options="{
attribution: 'Tiles © Esri',
maxZoom: 18,
label: 'Default'
}"
/>
Woo hoo! You should now see a map hovering over a place in London.----------
$3
Easily add other layers to your map! Let's add a marker:
:options="{
center: [51.505, -0.09],
zoom: 13
}"
> ...
Adding a circle and polygon are fairly similar:
:options="{
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}"
/>
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]"
/>
$3
Each component is equipped with a event which will emit { event, module } to whatever handler is used.$3
Popups starts to expose some of the flexibility of VueMappKit. You can handle popups in two ways:1. Use
@ready event to pass layer object to method and then use .bindPopup('')
2. Use custom VueMappKit prop to enable and popup.open to open on mountEvery component in VueMappKit comes with a
@ready event that passes back the instantiated Leaflet object. Technically, you could use the @ready event on to then create the rest of your map functionality instead of this nest-component driven approach.The
popup prop is custom to VueMappKit.
`
...
@ready="(event) => { event.module..bindPopup('') }"
/>
:popup="{
content: 'I am a popup',
open: true
}"
/>
:options="{
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}"
:popup="{
content: 'I am a circle'
}"
/>
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]"
:popup="{
content: 'I am a polygon'
}"
/>
See full Quick Start example here$3
Pass in an array events (as strings) that are supported by the layer type. Each event passed will then be registered as a listener on the component. See Leaflets docs for events. There is a "ready" event that is handle by MappKitLeaflet for you :). Each Leaflet supported event an { event, module } object.Additionaly, you can pass a boolean prop called
enable-bus which will registered each event passed in events prop on the global this.$mappKitBus bus.See full working example here.
----------
$3
Similar to , both and