Mapbox - add different pin types with mouse click based on button activation

Question

I have a page that pulls in my mapbox map, and I have two buttons on the page to allow the user to add different types of pins. For example, the user can click on one button and add one type of pin. While the button is active, the user can click on the map subsequent times and the old pin will be deleted and a new one added at the location of the latest click.

The user can then click on the other button and add the other type of pin without affecting the latest position of the other pin type.

The coordinates of the pin locations are also fed to an input box on the page so the user can see the coordinates of their latest pins.

I wasn't able to find anything like this explained anywhere else (if so, please link!), and so I had to use several different examples from mapbox and stackexchange to put this together. For some reason the two pin types are cross-connected - once both buttons have been activated, any new clicks update both pin type coordinates, and delete any previous pins, of either type. Basically, the pin types are not being separated by the buttons activated, despite my specific "if" statements stating that only one type of pin be added / removed if selected (the "_clicks" count does work correctly for counting button clicks and zeroing out one when the other is clicked - I double-checked that).

Why are the "if (----_clicks > 0)" statements running even when they are false? Or, what is a better method to allow button activation control the types of pins added to a map with a click? Thanks!

var typeA_marker;
var typeB_marker;
var typeA_clicks = 0;
var typeB_clicks = 0;

$("#button01").on('click', function(){
    typeA_clicks++;
    typeB_clicks = 0;

    if (typeA_clicks > 0) {
        var click = document.getElementById('click');
        map.on('click', function(e) {

                if (typeA_marker !== undefined) {
                    map.removeLayer(typeA_marker);
                }
                typeA_marker = L.marker(e.latlng).addTo(map);
                document.getElementById('location01').value = e.latlng;
        });
    }
});

$("#button02").on('click', function(){
    typeB_clicks++;
    typeA_clicks = 0;

    if (typeB_clicks > 0) {
        var click = document.getElementById('click');
        map.on('click', function(e) {

                if (typeB_marker !== undefined) {
                    map.removeLayer(typeB_marker);
                }
                typeB_marker = L.marker(e.latlng).addTo(map);
                document.getElementById('location02').value = e.latlng;
        });
    }
});

After working on this problem from a variety of methods, I think the issue has to do with improper Ajax calls (or lack thereof). It appears that once a button is clicked, the page treats the if statements as permanently true, so it continues to pass actions through both statements. I am fairly new to jQuery. I will continue to research proper ajax methodology, but if anyone has tips on how to properly setup these clicklisteners with if statements, I would greatly appreciate it! — sean

sean sean · Accepted Answer · 2014-10-07T04:47:29

I was able to figure out what I was doing wrong. For anyone with the same problem, you need to place the map click event outside the "if" statement evaluating which button was last clicked (see below). I also realized that I don't need the "click" variable declaration in this case.

Corrected Code:

var typeA_marker;
var typeB_marker;
var typeA_clicks = 0;
var typeB_clicks = 0;

$("#button01").on('click', function(){
    typeA_clicks++;
    typeB_clicks = 0;

    map.on('click', function(e) {
        if (typeA_clicks > 0) {

            if (typeA_marker !== undefined) {
                map.removeLayer(typeA_marker);
            }
            typeA_marker = L.marker(e.latlng).addTo(map);
            document.getElementById('location01').value = e.latlng;
        }
    });
});

$("#button02").on('click', function(){
    typeB_clicks++;
    typeA_clicks = 0;

    map.on('click', function(e) {
        if (typeB_clicks > 0) {

            if (typeB_marker !== undefined) {
                map.removeLayer(typeB_marker);
            }
            typeB_marker = L.marker(e.latlng).addTo(map);
            document.getElementById('location02').value = e.latlng;
        }
    });
});

Mapbox - add different pin types with mouse click based on button activation

1 Answers