0

I'm trying to fill an array with lat and lng values from markers that I put down in leaflet. The condtitions are: if the user is not hovering over the control buttons, and clicks on the map a function is called. You can see this in the code below. `

$("#myMap").click(function(e){
    if($(".leaflet-control-container").is(":hover")!=true){
    boundingBoxer();
    }

});

function boundingBoxer(){

 if(judge===true){
    mymap.on('click', onMapClick);
    function onMapClick(e) {
        Latitude = e.latlng.lat;
        Longitude = e.latlng.lng;
        boundingBox.X[counter] = Latitude;
        boundingBox.Y[counter] = Longitude;

        counter++;

        console.log("counter:" + counter);
        console.log("length: " + boundingBox.X.length);
        console.log(boundingBox.X);
   }   

 }
}

The problem is: after the first marker, all works fine. Then I put down the second marker and the array now has 3 elements. First is the X coordinate of the first marker, the second and the third is the X coordinate of the second marker. After I put down the third marker additional 3 elements are appended, all of them are the X coordinate of the third marker. And so on... So after the 5th marker the array looks like this: boundingBox.X = [x1, x2, x2, x3, x3, x3, x4, x4, x4, x4, x5, x5, x5, x5, x5];

I've done my research, but barely found any useful information. Can you tell me what am I missing/overlooking?

  • 2
    You're adding more click handlers every time you run mymap.on(...). Make sure you only call that at most once. – IvanSanchez Mar 20 '18 at 8:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.