Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue2-leaflet-movingmarker

Package Overview
Dependencies
Maintainers
4
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue2-leaflet-movingmarker

MovingMarker plugin extension for vue2-leaflet package

  • 1.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
99
increased by15.12%
Maintainers
4
Weekly downloads
 
Created
Source

vue2-leaflet-movingmarker

This is a movingmarker plugin extension for vue2-leaflet package

Install

npm install --save vue2-leaflet-movingmarker

Demo

Enjoy here You can see the demo code in the file Map.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

Keywords

FAQs

Package last updated on 15 Jun 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc