https://github.com/louismazel/vue2-leaflet-movingmarker
MovingMarker plugin extension for vue2-leaflet package
https://github.com/louismazel/vue2-leaflet-movingmarker
Last synced: over 1 year ago
JSON representation
MovingMarker plugin extension for vue2-leaflet package
- Host: GitHub
- URL: https://github.com/louismazel/vue2-leaflet-movingmarker
- Owner: LouisMazel
- License: mit
- Created: 2018-07-31T13:24:43.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-29T19:15:58.000Z (over 3 years ago)
- Last Synced: 2024-04-23T16:43:38.384Z (over 2 years ago)
- Language: Vue
- Homepage: https://louismazel.github.io/vue2-leaflet-movingmarker/
- Size: 954 KB
- Stars: 24
- Watchers: 5
- Forks: 15
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue2-leaflet-movingmarker
This is a [movingmarker plugin](https://gitlab.com/IvanSanchez/Leaflet.Marker.SlideTo) extension for [vue2-leaflet package](https://github.com/KoRiGaN/Vue2Leaflet)
## Install
```bash
npm install --save vue2-leaflet-movingmarker
```
## Demo
[Enjoy here](https://louismazel.github.io/vue2-leaflet-movingmarker/)
You can see the demo code in the file [Map.vue](./src/Map/index.vue)
## Usage
### on <template> add
something like this
```html
```
### on <script> add
#### option 1
In the same template file, at `` part, this will make the component available only to the template in this file
```js
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
```js
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()](https://gitlab.com/movingmarker/Leaflet.Marker.SlideTo), you can do it with a ref on the movingmarker vue element and using the `mapObject` property
```html
...
<l-moving-marker ref="movingMarkerRef">
...
</l-moving-marker>
...
```
```js
...
this.$refs.movingMarkerRef.mapObject.slideTo()
...
```
## Develop and build
npm install
npm run build
## Author
[Mazuel Loïc](https://github.com/LouisMazel)
## License
MIT