Leaflet.js : Changing Marker icons works, but only once

Question

Hi i try to create a Leaflet map with markers of differents colors on it. There is 3 buttons with onClick event on each one. Where i click on one of them, it add "Activate" class to the one i clicked and remove "Activate" from 2 others one.

Then i have 3 functions, one for each marker color and a function that read the selector Activate class.

A has Activate = blue marker and alert 'Blue', B has Activate = green marker and alert 'Green', C has Activate = yellow marker and alert '...Yellow!'

And also onload it exectute readSelector

And this works well, but only one time. Alert works every times i click on a button, with the good alert, but the marker color change only one time: If i start with blue (by reading onload), then i click on green, the marker will be green, then i click on yellow the marker will be yellow, but if i click again on blue or green, i'll have the good alert, but the marker stay yellow. It stay a the last color of the 3.

I don't know if it is understandable.

HTML ::

<div id="mapWrap" class="container">
    <div class="row">
        <div class="col-1 m-0 p-0">
            <div class="mapTool">
                <ul class="list-group list-group-horizontal m-0 p-0 mb-3">
                    <li class="list-group-item flex-fill bg-success categorySelector selectorActivate" id="santeSelector" onclick="onClickSante()">Santé</li>
                    <li class="list-group-item flex-fill bg-primary categorySelector " id="educSelector" onclick="onClickEduc()">Education</li>
                    <li class="list-group-item flex-fill bg-warning categorySelector " id="loisirSelector" onclick="onClickLoisir()">Loisir</li>
                </ul>
            </div>
        </div>
        <div class="col-11 m-0 p-0">
            <div id="mapid">
            </div>
        </div>
    </div>
</div>

JAVASCRIPT ::

//// OnClick Function ////

    var sante = $('#santeSelector');
    var educ = $('#educSelector');
    var loisir = $('#loisirSelector');

function onClickSante(){
    sante.addClass('selectorActivate');
    educ.removeClass('selectorActivate');
    loisir.removeClass('selectorActivate');
    };
sante.on('click',onClickSante);

function onClickEduc(){
    educ.addClass('selectorActivate');
    loisir.removeClass('selectorActivate');
    sante.removeClass('selectorActivate');
    };
educ.on('click',onClickEduc);

function onClickLoisir(){
    loisir.addClass('selectorActivate');
    sante.removeClass('selectorActivate');
    educ.removeClass('selectorActivate');
    };
loisir.on('click',onClickLoisir);

//// The MAP PART ////

    init map code from Leaflet 

//// Marker Function ////

var markerColor = L.marker();

function greenIconMark(e){
    markerColor
        .setLatLng(e.latlng)
        .setIcon(greenIcon)
        .addTo(mymap);
}
function blueIconMark(e){
    markerColor
        .setLatLng(e.latlng)
        .setIcon(blueIcon)
        .addTo(mymap);
}
function yellowIconMark(e){
    markerColor
        .setLatLng(e.latlng)
        .setIcon(yellowIcon)
        .addTo(mymap);
}
$('#santeSelector').on('click',readSelector);
$('#educSelector').on('click',readSelector);
$('#loisirSelector').on('click',readSelector);

window.onload = readSelector;

function readSelector(){

    if( $('#santeSelector').hasClass('selectorActivate') ){

        mymap.on('click', greenIconMark);
        alert('Santé is selected');

    }else if( $('#educSelector').hasClass('selectorActivate') ){

        mymap.on('click', blueIconMark);
        alert('Education is selected');

    }else if( $('#loisirSelector').hasClass('selectorActivate') ){

        mymap.on('click', yellowIconMark);
        alert('Loisir is selected');
    };
};

Thanks for reading me

Answer 1

This is because you have added multiple on events and the last one, is executed at last.

Change your code to:

function readSelector(){

    if( $('#santeSelector').hasClass('selectorActivate') ){

        mymap.off().on('click', greenIconMark);
        alert('Santé is selected');

    }else if( $('#educSelector').hasClass('selectorActivate') ){

        mymap.off().on('click', blueIconMark);
        alert('Education is selected');

    }else if( $('#loisirSelector').hasClass('selectorActivate') ){

        mymap.off().on('click', yellowIconMark);
        alert('Loisir is selected');
    };
};