Adding Leaflet.timeline npm to Vue-cli 3 deprecated? TypeError: Cannot read property 'bottomleft' of undefined

Question

My question is not about Detecting an undefined object property. I'm Trying to Add Leaflet.timeline to Vue-cli 3 using npm. I have a collection of features(geoJSON) and I'm trying to add them to a timeline, however L.timeline raises the error:

TypeError: Cannot read property 'bottomleft' of undefined

inside the leaflet.timeline module

Is the library deprecated or I'm missing something here?

    import * as L from "leaflet"

    import "leaflet.timeline"
    import "leaflet.markercluster"
    import "leaflet.markercluster.layersupport"
    import "leaflet.markercluster/dist/MarkerCluster.css"
    import "leaflet.markercluster/dist/MarkerCluster.Default.css"
    import "leaflet.heat"
    import "leaflet-groupedlayercontrol"
    import "leaflet-groupedlayercontrol/dist/leaflet.groupedlayercontrol.min.css"


    methods: {
      createBookmarkTimeLine(){

            var timeLine = L.timeline(
              {
                type: "FeatureCollection",
                features: vm.bookmarks,
                position: 'bottomleft',
                enablePlayback: true,
                getInterval: {
                  start: 1495647158,
                  end: 1537799558
                }
              }
            )

            var timelineControl = L.timelineSliderControl({
              formatOutput(){
                let date = Date().toString()
                return date
              },
              duration: 100000,
            })

            timelineControl.addTo(vm.bookmarkLayer)
            timelineControl.addTimelines(timeLine)
            timeLine.addTo(vm.bookmarkLayer

      }
    }

// vm.bookmarks content:
// [
//         {
//             "type": "Feature",
//             "geometry": {
//                 "type": "Point",
//                 "coordinates": [
//                     -47.88264281443456,
//                     -15.788079277798529
//                 ]
//             },
//             "properties": {
//                 "bookmark_area_name": "PessoasAndando",
//                 "bookmark_area_camera_name": "PTZ_1",
//                 "start_time": "2018-09-24T14:12:41Z",
//                 "end_time": "2018-09-24T14:13:01Z",
//                 "date": "2018-09-24T14:12:41Z",
//                 "object_type": "Person",
//                 "object_id": 26560226,
//                 "pixel_start_position": "[1168.0, 116.0]",
//                 "pixel_end_position": "[892.0, 268.0]",
//                 "event_id": "1668531",
//                 "device_id": "70243c02-b030-11e6-8fa5-a41f725f89f6",
//                 "bookmark_area": 3
//             }
//         },
//         {
//             "type": "Feature",
//             "geometry": {
//                 "type": "Point",
//                 "coordinates": [
//                     -47.88262034830791,
//                     -15.788017998552633
//                 ]
//             },
//             "properties": {
//                 "bookmark_area_name": "PessoasAndando",
//                 "bookmark_area_camera_name": "PTZ_1",
//                 "start_time": "2018-09-24T14:14:39Z",
//                 "end_time": "2018-09-24T14:14:59Z",
//                 "date": "2018-09-24T14:14:39Z",
//                 "object_type": "Person",
//                 "object_id": 26560296,
//                 "pixel_start_position": "[860.0, 440.0]",
//                 "pixel_end_position": "[944.0, 590.0]",
//                 "event_id": "1668539",
//                 "device_id": "70243c02-b030-11e6-8fa5-a41f725f89f6",
//                 "bookmark_area": 3
//             }
//         }]

<template>
  <v-content class="map-container" >
    <div id="mapid"></div>
  </v-content>
</template>

Answer 1

You are mixing the geoJSON params object with the timeline params object. You just need to separate them. Change your code to this and it should work:

vm.bookmarkTimeLine = L.timeline(
       {
         type: "FeatureCollection",
         features: vm.bookmarks, 
       },
       {
         pointToLayer: vm.bookmarkMarkerOptions,
         onEachFeature: vm.addBookmarkPopUp
       }
     )

You also need to add the timeline to your map and not a layer:

timelineControl.addTo(myMap)
timelineControl.addTimelines(vm.bookmarkTimeLine)
vm.bookmarkTimeLine.addTo(myMap)