how to use two marker props on single marker vue leaflet

Question

i need use rotationAngle(vue2-leaflet-rotatedmarker) and duration(vue2-leaflet-movingmarker) but i want use two props in single marker.

for example :

<l-marker :lat-lng="run.currentPoint.latLong"
 :icon="run.currentPoint.icon" :rotationAngle="250" :duration="2000">
</l-marker>

thank you.

Answer 1

Vue2Leaflet Plugins are just wrappers around the original leaflet plugin. Therefore it's quite easy to combine the two wrappers https://github.com/LouisMazel/vue2-leaflet-movingmarker/blob/master/lib/index.vue and https://github.com/mudin/vue2-leaflet-rotatedmarker/blob/master/Vue2LeafletRotatedMarker.vue of the two plugins into one. Call it e.g. LRotatedMovingMarker.vue, import it to your component and you can use it the way you wanted to.

 <template>
  <div style="display: none;">
    <slot v-if="ready" />
  </div>
 </template>

<script>
  import { marker, DomEvent, Icon } from 'leaflet'
  import { findRealParent, propsBinder } from 'vue2-leaflet'
  import 'leaflet.marker.slideto'
  import 'leaflet-rotatedmarker'
  const props = {
    draggable: {
      type: Boolean,
      custom: true,
      default: false
    },
    visible: {
      type: Boolean,
      custom: true,
      default: true
    },
    latLng: {
      type: [Object, Array],
      custom: true
    },
    icon: {
      custom: false,
      default: () => new Icon.Default()
    },
    zIndexOffset: {
      type: Number,
      custom: false
    },
    rotationAngle:{
      type: Number,
      default: () => 0,
    },
    rotationOrigin: {
      type: String,
      default: 'center center'
    },
    options: {
      type: Object,
      default: () => ({})
    },
    duration: {
      type: Number,
      required: true
    },
    keepAtCenter: {
      type: Boolean,
      default: false
    }
  }
  export default {
    name: 'LRotatedMovingMarker',
    props,
    data() {
      return {
        ready: false
      }
    },
    mounted() {
      const options = this.options
      if (this.icon) {
        options.icon = this.icon
      }
      options.draggable = this.draggable
      options.rotationAngle = this.rotationAngle?this.rotationAngle:0
      options.rotationOrigin = this.rotationOrigin
      this.mapObject = marker(this.latLng, options)
      this.mapObject.on('move', ev => {
        if (Array.isArray(this.latLng)) {
          this.latLng[0] = ev.latlng.lat
          this.latLng[1] = ev.latlng.lng
        } else {
          this.latLng.lat = ev.latlng.lat
          this.latLng.lng = ev.latlng.lng
        }
      })
      DomEvent.on(this.mapObject, this.$listeners)
      propsBinder(this, this.mapObject, props)
      this.ready = true
      this.parentContainer = findRealParent(this.$parent)
      this.parentContainer.addLayer(this, !this.visible)
    },
    beforeDestroy() {
      this.parentContainer.removeLayer(this)
    },
    watch: {
      rotationAngle: {
        handler: function () {
          this.options.rotationAngle = this.rotationAngle
        }
      }
    },
    methods: {
      setDraggable(newVal) {
        if (this.mapObject.dragging) {
          newVal
            ? this.mapObject.dragging.enable()
            : this.mapObject.dragging.disable()
        }
      },
      setVisible(newVal, oldVal) {
        if (newVal === oldVal) return
        if (this.mapObject) {
          if (newVal) {
            this.parentContainer.addLayer(this)
          } else {
            this.parentContainer.removeLayer(this)
          }
        }
      },
      setLatLng(newVal) {
        if (newVal == null) return
        if (this.mapObject) {
          const oldLatLng = this.mapObject.getLatLng()
          const newLatLng = {
            lat: newVal[0] || newVal.lat,
            lng: newVal[1] || newVal.lng
          }
          if (
            newLatLng.lat !== oldLatLng.lat ||
            newLatLng.lng !== oldLatLng.lng
          ) {
            this.mapObject.slideTo(newLatLng, {
              duration: this.duration,
              keepAtCenter: this.keepAtCenter
            })
          }
        }
      }
    }
  }
</script>