Implementing Trajectory Playback in Leaflet with Leaflet.TrackPlayer and Vue 3

The article explains how to use the Leaflet.TrackPlayer plugin to implement a simple and efficient trajectory playback feature on a Leaflet map, providing a basic demonstration and links to the plugin documentation.

1. Set up a basic Leaflet development environment – the example uses Vue 3. Create an index.vue file with the following content:

<template>
  <div id="map"></div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { onMounted } from "vue";

onMounted(() => {
  let map = L.map("map", {
    zoom: 14,
    center: [34.27519341726532, 108.911884710754]
  });
  L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);
});
</script>

<style scoped>
#map {
  height: 800px;
  width: 800px;
}
</style>

2. Install and import Leaflet.TrackPlayer

npm install leaflet-trackplayer

import "leaflet-trackplayer";

3. Add the player object to the map

After the map object is created, define a simulated trajectory array and a moving marker icon, then create a TrackPlayer instance:

// Simulated trajectory data
let path = [
  { lat: 34.25615548523744, lng: 108.91164044842363 },
  { lat: 34.256155386830855, lng: 108.91179023713374 },
  { lat: 34.256155386830855, lng: 108.91179023713374 },
  { lat: 34.25607942383744, lng: 108.91177925878043 },
  // ... (many more points omitted for brevity)
  { lat: 34.29496736180883, lng: 108.91578701078069 }
];

// Define the moving marker icon
let markerIcon = L.icon({
  iconSize: [27, 54],
  iconUrl: new URL("./assets/car.png", import.meta.url).href,
  iconAnchor: [13.5, 27]
});

// Create the player and add it to the map
let track = new L.TrackPlayer(path, { markerIcon }).addTo(map);

The result shows the trajectory player successfully added to the map.

4. Start playback

// Set an appropriate zoom level
map.setZoom(17, { animate: false });

// Start the playback
track.start();

Calling the start() method begins the animation of the marker along the defined path.

5. Other scenarios

If you need a walking trajectory where the marker should not rotate with the direction of movement, modify the marker definition and disable rotation:

// Define a simple marker without rotation
let markerIcon = L.icon({
  iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
  iconAnchor: [12.5, 41]
});

// Create the player with rotation disabled
let track = new L.TrackPlayer(path, { markerIcon, markerRotation: false }).addTo(map);

This configuration keeps the marker upright while it follows the path.

6. Full code example

<template>
  <div id="map"></div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-trackplayer";
import { onMounted } from "vue";

onMounted(() => {
  let map = L.map("map", {
    zoom: 14,
    center: [34.27519341726532, 108.911884710754]
  });
  L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

  // Simulated trajectory data (same as above)
  let path = [
    { lat: 34.25615548523744, lng: 108.91164044842363 },
    { lat: 34.256155386830855, lng: 108.91179023713374 },
    // ... (remaining points)
    { lat: 34.29496736180883, lng: 108.91578701078069 }
  ];

  // Define the moving marker icon
  let markerIcon = L.icon({
    iconSize: [27, 54],
    iconUrl: new URL("./assets/car.png", import.meta.url).href,
    iconAnchor: [13.5, 27]
  });

  // Create the player and add to map
  let track = new L.TrackPlayer(path, { markerIcon }).addTo(map);

  // Adjust zoom and start playback
  map.setZoom(17, { animate: false });
  track.start();
});
</script>

<style scoped>
#map {
  height: 800px;
  width: 800px;
}
</style>

Summary

The article demonstrates a basic trajectory playback implementation using the Leaflet.TrackPlayer plugin, and mentions that the plugin also supports custom line styles, speed adjustments, and event listeners; refer to the plugin documentation for advanced usage.