Cliquez sur Événements avec Leaflet et geoJSON

18

Comment attacher un événement click à un geoJSON qui exécute ensuite une fonction Ajax lorsque vous cliquez dessus. J'ai regardé onEachFeaturemais cela s'exécute lorsque le geoJSON est chargé, pas quand on clique, exécutant ainsi une tonne d'appels ajax!

Brett Cullen
la source

Réponses:

22

Vous étiez sur la bonne voie avec onEachFeature.

C'est juste que vous devez lier l'événement en cliquant sur chaque élément.

Voir ci-dessous (testé)

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
la source
8

Vous pouvez le faire avec un peu moins de code que la version 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
la source
3

juste une autre façon en tant que fonction en ligne

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
la source