Have ideas to improve npm?Join in the discussion! ¬Ľ

    vue2-leaflet-moving-rotated-marker

    0.0.3¬†‚Äʬ†Public¬†‚Äʬ†Published

    vue2-leaflet-moving-rotated-marker

    This is a moving-rotated-marker plugin extension for vue2-leaflet package

    Install

    npm install --save vue2-leaflet-moving-rotated-marker

    Demo

    git clone git@github.com:luks87zg/vue2-leaflet-moving-rotated-marker.git
    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-rotated-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"
          :rotationAngle="45"
      />
    </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 LMovingRotatedMarker from 'vue2-leaflet-moving-rotated-marker'
    ...
    export default {
      ...
      components: {
        LMovingRotatedMarker
        ...
      },
      ...
    }

    option 2

    At main Vue configuration, this will make the component available to all templates in your app

    import Vue from 'vue'
    import LMovingRotatedMarker from 'vue2-leaflet-moving-rotated-marker'
    ...
    Vue.component('l-moving-rotated-marker', LMovingRotatedMarker)

    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-rotated-marker ref="movingRotatedMarkerRef">
      ...
    </l-moving-rotated-marker>
    ...
    ...
    this.$refs.movingRotatedMarkerRef.mapObject.slideTo()
    ...

    Develop and build

    npm install
    npm run build
    

    License

    MIT

    Install

    npm i vue2-leaflet-moving-rotated-marker

    DownloadsWeekly Downloads

    6

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    45.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar