Skip to content
MovingMarker plugin extension for vue2-leaflet package
Vue JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
.DS_Store
.gitignore [fix] vulnerability Apr 30, 2019
LICENSE 🔥 Moving Marker : First commit Jul 31, 2018
README.md
Vue2LeafletMovingmarker.vue 🔥 Moving Marker : First commit Jul 31, 2018
build.config.js 🔥 Moving Marker : First commit Jul 31, 2018
example.vue 🔥 Moving Marker : First commit Jul 31, 2018
package-lock.json [fix] vulnerability Apr 30, 2019
package.json
yarn.lock

README.md

vue2-leaflet-movingmarker

This is a movingmarker plugin extension for vue2-leaflet package

Install

npm install --save vue2-leaflet-movingmarker

Demo

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

Usage

on <template> add

something 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>

on <script> add

option 1

In 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
    ...
  },
  ...
}

option 2

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)

Access movingmarker layer directly

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()
...

Develop and build

npm install
npm run build

Author

Mazuel Loïc

License

MIT

You can’t perform that action at this time.