Carto-VL动画控件未显示在地图上

Question

示例Carto-VL动画控制代码没有出现在我的动画地图上。

我正在创建自上次冰河世纪以来Carto VL树木种群变化的动画，我希望用户能够更改持续时间并播放/暂停动画。我已将示例页面中的代码粘贴到地图中。

const $progressRange = document.getElementById('js-progress-range');
const $playButton = document.getElementById('js-play-button');
const $pauseButton = document.getElementById('js-pause-button');
const $durationRange = document.getElementById('js-duration-range');
const $currentTime = document.getElementById('js-current-time');

// Listen to interaction events with the UI
$playButton.addEventListener('click', () => {
viz.variables.animation.play();
});

$pauseButton.addEventListener('click', () => {
viz.variables.animation.pause();
});

$durationRange.addEventListener('change', () => {
viz.variables.duration = parseInt($durationRange.value, 10);
});

// Update progress bar each 100 milliseconds
function updateProgress () {
$progressRange.value = viz.variables.animation.getProgressPct();
$currentTime.innerText = viz.variables.animation.getProgressValue();
}

setInterval(updateProgress, 100);

我希望动画控制框会显示在地图上，但是只有在代码中有错误导致地图不显示时才会显示。即使那样，我也无法与之互动。