Haga clic en Eventos con Folleto y geoJSON

18

¿Cómo adjunto un evento de clic a un geoJSON que luego ejecuta una función Ajax cuando se hace clic? La miré a los onEachFeaturepero que se ejecuta cuando se carga el GeoJSON, no cuando se hace clic, por tanto, la ejecución de una tonelada de llamadas Ajax!

Brett Cullen
fuente

Respuestas:

22

Estabas en el camino correcto con onEachFeature.

Solo tienes que vincular el evento, haz clic en cada elemento.

Ver abajo (probado)

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);
ThomasG77
fuente
8

Puede hacerlo con un poco menos de código que la versión de ThomasG77:

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);
Steve Bennett
fuente
3

solo otra forma como función en línea

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

layer.on('mouseover', function (e) {
  // e = event
  console.log(e);
  // You can make your ajax call declaration here
  //$.ajax(... 
  });}).addTo(map);
hoogw
fuente