MapBox: отображение / скрытие маркеров с помощью списка переключения

Я пытаюсь понять, как показать / скрыть маркеры MapBox на основе динамического списка переключения.

На данный момент у меня есть карта MapBox, и я могу успешно добавить к ней несколько маркеров с помощью этого кода;

for (var i = 0; i < markers.length; i++) {
    var la = markers[i]['lat'];
    var lo = markers[i]['long'];
    var siteName = markers[i]['Site Name']
    var siteType = markers[i]['Site Type']
    var siteAddr = markers[i]['Address']
    var colour = markers[i]["Colour"];

    new mapboxgl.Marker({
    "color":colour
    })
    .setLngLat([lo,la])
    .setPopup(new mapboxgl.Popup()
    .setHTML("<b>" + siteName + "</b><br>(" + siteType + ")<br>" + siteAddr )).addTo(map);
}

Все это работает нормально, и я получаю красивую карту.

Затем я вдохновился этим примером и попытался показать / скрыть маркеры на основе siteType, как показано здесь; https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/

У меня проблема в том, что пример основан на использовании слоев, а моя карта использует маркеры.

Я долго пробовал разные вещи, но в конечном итоге я даже не уверен, какую стратегию принять, не говоря уже о коде, необходимом для ее поддержки.

Можно ли показать / скрыть маркеры с помощью списка переключения, или я должен использовать слои для этого? Если возможно, то как? И как с помощью слоев вы настраиваете отдельные местоположения, чтобы они могли иметь отдельные всплывающие окна? Я не после того, как кто-то накормит меня кодом с ложечки (хотя я бы не сказал «нет»!), В основном я после предложения / обсуждения стратегии, которую я могу принять для достижения своей цели.

Спасибо!