Показать / скрыть буклет маркеров с помощью флажка

Question

У меня есть некоторые маркеры на моей карте, которые иногда не нужны, я хочу реализовать контроллер флажков, который показывает / скрывает их. В нескольких словах я пытаюсь добавить класс к этим маркерам.

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

function gateways_markersMap(gateways){
    for (var i = 0; i < gateways.length; i++){
        coo = [gateways[i].gat_lat,gateways[i].gat_lon];

        popUp = "Nombre: " + String(gateways[i].gat_name) + "<br>Id: " + gateways[i].gat_id;

        var iconMarker = new L.Icon({
            iconUrl: '/static/img/markers/yes_fixed-markers/gateway.png',
            iconSize: [35, 35],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34]
        });

        var marker = L.marker(coo, {icon: iconMarker}).bindPopup(popUp);
        $(marker).addClass('prueba'); // HERE I'M TRYING ADD CLASS
        layerGroup.addLayer(marker);
        map.addLayer(layerGroup);
    }
}

В другой части мой код У меня есть функция, которая контролирует поведение флажка,

function checkboxController(){
    $("#cleanGatewFilter").on('click', function(){
        if ($('#cleanGatewFilter').is(':checked')) {
            $('#allGatewFilter').prop("checked", false);

            $('.prueba').hide() //HERE I WANT TO HIDE THE MARKERS
        }
    });
}

Но ничего не происходит.

Как я могу это сделать? Можно добавить класс к маркерам и затем показать / скрыть их с помощью флажка?

Большое спасибо!

Answer 1

Вы можете добавить маркеры в группу объектов, чтобы отобразить маркеры, и удалить группу с карты, чтобы скрыть маркеры.

var fg = L.featureGroup();
function gateways_markersMap(gateways){
    for (var i = 0; i < gateways.length; i++){
        coo = [gateways[i].gat_lat,gateways[i].gat_lon];

        popUp = "Nombre: " + String(gateways[i].gat_name) + "<br>Id: " + gateways[i].gat_id;

        var iconMarker = new L.Icon({
            iconUrl: '/static/img/markers/yes_fixed-markers/gateway.png',
            iconSize: [35, 35],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34]
        });

        var marker = L.marker(coo, {icon: iconMarker}).bindPopup(popUp);
        marker.addTo(fg);
    }
    //Add the featuregroup and the layergroup outside of the loop to the map
    layerGroup.addLayer(fg);
    map.addLayer(layerGroup);
}

function checkboxController(){
    $("#cleanGatewFilter").on('click', function(){
        if ($('#cleanGatewFilter').is(':checked')) {
            $('#allGatewFilter').prop("checked", false);
            layerGroup.removeLayer(fg); //hide
        }else{
            layerGroup.addLayer(fg); //show
        }
    });
}