Click Events with Leaflet and GeoJSON

Question

How do I attach a click event to a GeoJSON that then executes an Ajax function when clicked. I looked into onEachFeature but that executes when the GeoJSON is loaded, not when clicked, thus executing a ton of ajax calls!

Answer 1

You were on the right way with onEachFeature.

It's just you have to bind event click on each element.

See below (tested)

function whenClicked(e) {
  // e = event
  console.log(e);
  // You can make your ajax call declaration here
  //$.ajax(... 
}

function onEachFeature(feature, layer) {
    //bind click
    layer.on({
        click: whenClicked
    });
}

geojson = L.geoJson(your_data, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

Answer 2

You can do it with slightly less code than ThomasG77's version:

function onEachFeature(feature, layer) {
    //bind click
    layer.on('click', function (e) {
      // e = event
      console.log(e);
      // You can make your ajax call declaration here
      //$.ajax(... 
    });

}

geojson = L.geoJson(your_data, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

Answer 3

Just another way as an inline function:

geojson = L.geoJson(your_data, {
  style: style,
  onEachFeature: function onEachFeature(feature, layer) {

    layer.on('mouseover', function (event) {
      console.log(event);
      // You can make your Ajax call declaration here
      //$.ajax(... 
    });

  }).addTo(map);