Элементы управления анимацией 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);

Я ожидаю, что блок управления анимацией появится на карте, но он появляется только в том случае, если в коде есть ошибка, из-за которой карта не отображается. Даже тогда я не могу с этим взаимодействовать.