incorporating AnimatedMarker plugin with react-leaflet

Question

I have chosen this plugin because it seems like the best way to animate a marker on a map polyline.

It's not on npm so I just added module.exports = L.animatedMarker to AnimatedMarker.js from the repository and required it.

App.js

<AnimatedMarkerElement 
  route={this.state.route} 
  map={this.refs.map.leafletElement}
/>

AnimatedMarkerElement.js

require('./AnimatedMarker')
import { MapComponent } from 'react-leaflet'
import L from 'leaflet'

export default class AnimatedMarkerElement extends MapComponent {

  componentWillReceiveProps(nextProps) {
    const line = L.polyline([nextProps.route.coordinates]),
      animatedMarker = L.animatedMarker(line.getLatLngs())

    nextProps.map.addLayer(animatedMarker)
  }

  render() {
    return null
  }
}

The error is:

Uncaught TypeError: Cannot read property 'lat' of null

I think that the plugin is looking for a map that it can't find because its buried inside react elements.

Answer 1

const line = L.polyline([nextProps.route.coordinates]),

should actually be

const line = L.polyline(nextProps.route.coordinates),

I was nesting an array inside an array.