Leaflet Marker message on click ajax call

Question

I have a marker on leafletJS which on click I need to invoke a ajax call and then

     markers.push({
                                    id: 'abc_' + j,
                                    lat: abcLatLonOptions[j][0],
                                    lng: abcLatLonOptions[j][1],
                                    layer: 'abc',
                                    icon: {
                                        iconUrl: icons['abc'].icon,
                                        iconSize: [16, 16],
                                        popupAnchor: [0, 0],
                                    },
                                    message: complieAbcMessage(lat, lon, startTime, eta, calculatedEta, speed)
}

Now depending on the lat and lon I need to retrieve some data and then show. The above function works, but the problem is that I have 1000's of markers and I loop through the markers and while adding the markers the function complieAbcMessage is invoked and the ajax is invoked, I don't want this to happen

How can I avoid the function being called when adding the markers and only invoke it onclick?

Update 1:

    function  complieAbcMessage(lat, lon, startTime, eta, calculatedEta, speed) {
    var tide_level = 7.5;

    var tideWindowRequest = $.ajax({
                type: "GET",
                async: false,
                url: "https://api.sealevelresearch.com/1/predictions/tide-windows/liverpool-gladstone-dock/?start=" + startTime+ "Z&end=" + eta+ "Z&tide_level=" + tide_level,
                contentType: "application/json; charset=utf-8"
            });

return tideWindowRequest;
    }

@muzaffar, I have added it, its a simple AJAX request to a webservice and I just get the result. — victor
How do you trigger ccomplieAbcMessage() when user click on marker? — muzaffar
@muzaffar, I do not trigger it manually, just using the leafletJS marker's functionality. — victor
if you don't mind, please add the remaining leaflet code here as well. — muzaffar

victor victor · Accepted Answer · 2015-07-31T09:47:37

@muzaffar Here is the [jsfiddle][1] with the solution

[1]: enter code herehttp://jsfiddle.net/d2p19vn4/3/

Leaflet Marker message on click ajax call

1 Answers