components/location/HistoryMap.vue

<template lang="pug">
  .history_map
    SimplicitiMap(ref="map")            
</template>
<script>
import { mapGetters } from 'vuex'
import SimplicitiMap from '@c/shared/SimplicitiMap/SimplicitiMap.vue'

/**
 * This component is used from inside TripHistory/Circuit
 * @namespace components
 * @category components
 * @subcategory location/history
 * @module HistoryMap
 **/
export default {
  name: 'HistoryMap',
  components: {
    SimplicitiMap,
  },
  computed: {
    ...mapGetters({
      leafletPolylines: 'location_module/leafletPolylines',
    }),
  },
  mounted() {
    this.$mitt.on(
      'SIMPLICITI_MAP__FLY_TO_TRIP_STEP_POLYLINE',
      this.flyToStepPolyline
    )
  },
  destroyed() {
    this.$mitt.off(
      'SIMPLICITI_MAP__FLY_TO_TRIP_STEP_POLYLINE',
      this.flyToStepPolyline
    )
  },
  methods: {
    /**
     * SIMPLICITI_MAP__FLY_TO_TRIP_STEP_POLYLINE
     *
     * @todo: Refactor/Improve communication (Do not use Events)
     */
    flyToStepPolyline(data) {
      let polyline = (
        this.leafletPolylines.find(
          (thp) => thp.stepNumber == data.stepNumber
        ) || {}
      ).polyline

      if (!polyline) {
        this.$log.warn(
          'Unable to find leaflet polyline (vuex) for stepNumber ',
          {
            stepNumber: data.stepNumber,
            leafletPolylines: this.leafletPolylines,
          }
        )
        return
      }
      this.$refs.map.getMap().flyToBounds(polyline)
    },
  },
}
</script>
<style lang="scss" scoped>
.history_map {
  height: 100%;
  height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
}
</style>