This is a movingmarker plugin extension for vue2-leaflet package
npm install --save vue2-leaflet-movingmarker
git clone git@github.com:LouisMazel/vue2-leaflet-movingmarker.git
cd vue2-leaflet-movingmarker
yarn
yarn example
# or alternatively using npm
npm install
npm run example
Then you should be able to navigate with your browser and see the demo in http://localhost:4000/
You can see the demo code in the file example.vue
<template>
addsomething like this
<l-map :zoom=10 :center="initialLocation">
<l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
<l-moving-marker
v-for="driver in drivers"
:key="driver.uuid"
v-if="driver.location"
:lat-lng="getLocation(driver)"
:icon="getIcon(driver.uuid)"
@click="setCurrentDriver(driver)"
ref="driverMarker"
:duration="2000"
/>
</l-map>
<script>
addIn the same template file, at <script>
part, this will make the component available only to the template in this file
import LMovingMarker from 'vue2-leaflet-movingmarker'
...
export default {
...
components: {
LMovingMarker
...
},
...
}
At main Vue configuration, this will make the component available to all templates in your app
import Vue from 'vue'
import LMovingMarker from 'vue2-leaflet-movingmarker'
...
Vue.component('l-moving-marker', LMovingMarker)
If you need to access other movingmarker methods, like slideTo(), you can do it with a ref on the movingmarker vue element and using the mapObject
property
...
<l-moving-marker ref="movingMarkerRef">
...
</l-moving-marker>
...
...
this.$refs.movingMarkerRef.mapObject.slideTo()
...
npm install
npm run build
Author: LouisMazel
GitHub: https://github.com/LouisMazel/vue2-leaflet-movingmarker
#vuejs #vue #javascript #vue-js