How to implement movingMarker of leaflet-moving-marker on Angular?

Question

I'm trying to implement moving maker of leaflet-moving-marker but some errors occur.

import {movingMarker} from 'leaflet-moving-marker'

    var myMovingMarker = L.movingMarker([[48.8567, 2.3508],[50.45, 30.523333]],
      [20000]).addTo(this.map);

myMovingMarker.start();

I have implemented as below and its is saying that movingMarker does not exist on type of import .../@types/leaflet/index.

Answer 1

You can use leaflet.animatedmarker. It is similar with the library you tried to use and is compatible with the latest leaflet version.

install the plugin:

npm i leaflet.animatedmarker

import the plugin:

import "leaflet.animatedmarker/src/AnimatedMarker";

when the component mounts create and save an instance of the plugin:

...
animatedMarker;

ngOnInit() {
   ...

    const line = L.polyline(
      [
        [40.6851, -73.94136],
        [40.68576, -73.94149],
        [40.68649, -73.94165]
      ],
      {
        color: "#02929b",
        weight: 1.5
      }
    ).addTo(map);

    this.animatedMarker = L.animatedMarker(line.getLatLngs(), {
      autoStart: false,
      icon
    });

    map.addLayer(this.animatedMarker);

    const group = new L.featureGroup([this.animatedMarker]);

    map.fitBounds(group.getBounds());
}

 

startAnimation() {
   this.animatedMarker.start();
}

Press the button to start the animation:

<button (click)="startAnimation()">Start animation</button>

Demo