How to remove or not show marker in map with leaflet?

Question

I have a property called Estado, that can have four values: aceite, concluido, recusado, emAvaliacao. For each one of them I have a specific marker. However, if the Estado= recusado, the marker shouldn't appear on the map. Here is where is defined which marker should be used:

            $.each(data, function (i, item) {

                //identificação do tipo de marcador que deve aparecer de acordo com o estado da ignição
                var ignicao;
        

                if (item.estado == aceite) {
                    ignicao = L.icon({
                        iconUrl: '/icons/aceite.png',
                        iconSize: [35, 35], // size of the icon
                    });


                }
                else {

                    if (item.estado == emAvaliacao) {
                        ignicao = L.icon({
                            iconUrl: '/icons/emAvaliacao.png',
                            iconSize: [35, 35], // size of the icon
                        });
                    }
                    else {
                        if (item.estado == concluido) {
                            ignicao = L.icon({
                                iconUrl: '/icons/concluido.png',
                                iconSize: [35, 35], // size of the icon
                            });

                        }
                        else {
                            if (item.estado == recusado) {
                               
                                map.removeLayer(item)
                   
                           }


                        }
                    }
                }


                //colocar um marcador no mapa de acordo com a latitude e longitude fornecidas
                var marker = new L.marker([item.latitude, item.longitude], { icon: ignicao })

                    .on('click', function onClick(e) {

                        var id = item.id;
                        

                        //assim que um marcador for clicado é mostrado o popup das ignições
                        modal.style.display = "block";

                        //indicação do marcador que foi clicado
                        clickedmarker = e.target;
                        console.log(clickedmarker);


                        //vai buscar toda a informação correspondente ao id fornecido
                        getData(id, clickedmarker);

                       

                        

                        //Actividade dos botões presentes no popup das ignições
                        $(document).on('click', '#aceite', function () {
                            //se o estado for aceite, o botão respetivo estará desativado
                            if (item.estado == aceite) {
                                document.getElementById("aceite").disabled = true;
                                document.getElementById("recusado").disabled = false;
                                document.getElementById("concluido").disabled = false;

                            }
                            //se for clicado passará ao icon correspondente
                            else {

                                clickedmarker.setIcon(accepted);
                                
                                //fecha o modal das avaliação da ignição
                                modal.style.display = "none";
                                //atualiza a base de dados com o novo estado
                                atualizaBD(id, Estado.aceite, item.latitude, item.longitude);
                               

                            }


                        });

                         $(document).on('click', '#concluido', function () {
                             //se o estado for concluido, o botão respetivo estará desativado
                             if (item.estado == concluido) {

                                document.getElementById("concluido").disabled = true;
                                document.getElementById("aceite").disabled = false;
                                document.getElementById("recusado").disabled = false;
                            }
                            //se for clicado passará ao icon correspondente
                            else {

                                clickedmarker.setIcon(conclued);
                                //fecha o modal das avaliação da ignição
                                modal.style.display = "none";
                                 //atualiza a base de dados com o novo estado
                                 atualizaBD(id, Estado.concluido, item.latitude, item.longitude);
                                


                            }

                        });
                        
                        $(document).on('click', '#recusado', function () {
                            //se o estado for recusado, o marcador será removido do mapa
                            //clickedmarker.removeFrom(map);
                           

                            //map.removeLayer(clickedmarker)
                       
                            clickedmarker = null;
                            modal.style.display = "none";
                            //atualiza a base de dados com o novo estado
                            atualizaBD(id, Estado.recusado, item.latitude, item.longitude);
                            
                            
                        });
                
                    }).addTo(map);

                //adiciona marador ao mapa
                $('#json map').append(marker);

            });// fim each

I alread tried using:

map.removeLayer(ignicao)

But this doesn't work, saying that it cant create the item.

Can somebody help me with this error?

Answer 1

I think you add the icon to the layer, but in the recusado if you don't define the icon.

Exlude the creation of the icon ignicao when the property is recusado .

And you can call else if directly:

if (item.estado == aceite) {
    ignicao = L.icon({
        iconUrl: '/icons/aceite.png',
        iconSize: [35, 35], // size of the icon
    });
} else if (item.estado == emAvaliacao) {
    ignicao = L.icon({
        iconUrl: '/icons/emAvaliacao.png',
        iconSize: [35, 35], // size of the icon
    });
} else if (item.estado == concluido) {
    ignicao = L.icon({
        iconUrl: '/icons/concluido.png',
        iconSize: [35, 35], // size of the icon
    });
} else if (item.estado == recusado) {
    map.removeLayer(item)
}

Answer 2

I need to add the code:

  if (item.estado == recusado) {
         map.removeLayer(marker)
  }

after the marker is appended. Like this:

                $.each(data, function (i, item) {

            //identificação do tipo de marcador que deve aparecer de acordo com o estado da ignição
            var ignicao;
    

            if (item.estado == aceite) {
                ignicao = L.icon({
                    iconUrl: '/icons/aceite.png',
                    iconSize: [35, 35], // size of the icon
                });


            }
            else {

                if (item.estado == emAvaliacao) {
                    ignicao = L.icon({
                        iconUrl: '/icons/emAvaliacao.png',
                        iconSize: [35, 35], // size of the icon
                    });
                }
                else {
                    if (item.estado == concluido) {
                        ignicao = L.icon({
                            iconUrl: '/icons/concluido.png',
                            iconSize: [35, 35], // size of the icon
                        });

                    }
                    else {
                        if (item.estado == recusado) {
                            ignicao = L.icon({
                            iconUrl: '/icons/default.png',
                            iconSize: [35, 35], // size of the icon
                        });
                           
                        }


                    }
                }
            }


            //colocar um marcador no mapa de acordo com a latitude e longitude fornecidas
            var marker = new L.marker([item.latitude, item.longitude], { icon: ignicao })

                .on('click', function onClick(e) {

                    var id = item.id;
                    

                    //assim que um marcador for clicado é mostrado o popup das ignições
                    modal.style.display = "block";

                    //indicação do marcador que foi clicado
                    clickedmarker = e.target;
                    console.log(clickedmarker);


                    //vai buscar toda a informação correspondente ao id fornecido
                    getData(id, clickedmarker);

                   

                    

                    //Actividade dos botões presentes no popup das ignições
                    $(document).on('click', '#aceite', function () {
                        //se o estado for aceite, o botão respetivo estará desativado
                        if (item.estado == aceite) {
                            document.getElementById("aceite").disabled = true;
                            document.getElementById("recusado").disabled = false;
                            document.getElementById("concluido").disabled = false;

                        }
                        //se for clicado passará ao icon correspondente
                        else {

                            clickedmarker.setIcon(accepted);
                            
                            //fecha o modal das avaliação da ignição
                            modal.style.display = "none";
                            //atualiza a base de dados com o novo estado
                            atualizaBD(id, Estado.aceite, item.latitude, item.longitude);
                           

                        }


                    });

                     $(document).on('click', '#concluido', function () {
                         //se o estado for concluido, o botão respetivo estará desativado
                         if (item.estado == concluido) {

                            document.getElementById("concluido").disabled = true;
                            document.getElementById("aceite").disabled = false;
                            document.getElementById("recusado").disabled = false;
                        }
                        //se for clicado passará ao icon correspondente
                        else {

                            clickedmarker.setIcon(conclued);
                            //fecha o modal das avaliação da ignição
                            modal.style.display = "none";
                             //atualiza a base de dados com o novo estado
                             atualizaBD(id, Estado.concluido, item.latitude, item.longitude);
                            


                        }

                    });
                    
                    $(document).on('click', '#recusado', function () {
                        //se o estado for recusado, o marcador será removido do mapa
                        //clickedmarker.removeFrom(map);
                       

                        //map.removeLayer(clickedmarker)
                        map.removeLayer(marker)
                        clickedmarker = null;
                        modal.style.display = "none";
                        //atualiza a base de dados com o novo estado
                        atualizaBD(id, Estado.recusado, item.latitude, item.longitude);
                        
                        
                    });
            
                }).addTo(map);
           
            //adiciona marador ao mapa
            $('#json map').append(marker);


            if (item.estado == recusado) {
                map.removeLayer(marker)
            }

          


        });// fim each