Conseguir que varias funciones trabajen con el evento mouseover en Leaflet

Question

Estoy haciendo una aplicación de mapas web utilizando leaflet y algunos datos geoJSON para una cuadrícula. Quiero ser capaz de pasar el ratón por encima de cada celda de la cuadrícula y resaltar esa celda y mostrar una ventana emergente de las coordenadas. En el código de abajo, básicamente he creado dos funciones que deben ser activadas cuando el evento mouseover ocurre: highlightFeature(e) y coordinate(e) . Después de mi solicitud getJSON para obtener los datos geoJSON para la cuadrícula, estoy usando layer.on({mouseover: <function call>}) to call the desired function when I mouseover a feature/grid cell. If I just use one function, it works fine. But if I try to do something like mouseover: highlightFeature, coordinate,` sólo la primera función funciona. ¿Qué estoy haciendo mal?

function highlightFeature(e) {
      var layer = e.target;

      layer.setStyle({
        weight: 0.5,
        fillColor: "#ffff00",
        dashArray: '',
        fillOpacity: 0.5
      });

      if (!L.Browser.ie && !L.Browser.opera) {
          layer.bringToFront();
      }
    };

function resetHighlight(e) {
  var layer = e.target;

  layer.setStyle({
    weight: 0.5,
    dashArray: '',
    fillOpacity: 0
  })
};

function zoomToFeature(e) { 
  map.fitBounds(e.target.getBounds(15));
};

var popup = L.popup();
function coordinate(e) {
  var layer = e.target;

  popup
    .setLatLng(e.latlng)
    .setContent("Coordinates: " + feature.properties.LON + ", " +   feature.properties.LAT.toString())
  .openOn(map);
};
console.log(coordinate);

$.getJSON('./grid.geojson', function(data){
// add GeoJSON layer to the map once the file is loaded
  L.geoJson(data, {
    style: function(feature){
      return {
        color: "#000000",
        weight: 0,
        opacity: 0,
        fillOpacity: 0
      };
    },
    onEachFeature: function( feature, layer ){
      layer.on({
        mouseover: highlightFeature, coordinate,
        mouseout: resetHighlight,
        click: zoomToFeature
      });
    },
  }).addTo(map)
});

Answer 1

JavaScript es tolerante a los errores sólo hasta cierto punto.

No le gustan sus dos nombres de función separados por una coma.

Ya sabes que en JS, los espacios en blanco / saltos de línea no tienen un significado particular además de separar identificadores y declaraciones. También sabes que en JS, un objeto está hecho de una lista de nombres de propiedades y valores.

Por lo tanto, el mouseover espera un solo valor, pero usted está tratando de proporcionar 2, lo que resulta en un error de sintaxis en ES5, o equivalente a {coordinate: coordinate} en ES6 (asignación abreviada).

Puedes crear una función "envolvente" que llame a tus 2 funciones:

layer.on("mouseover", function (event) {
  highlightFeature(event);
  coordinate(event);
});

O también podría simplemente llamar a otro layer.on() para adjuntar su segunda función al mismo evento:

layer.on("mouseover", highlightFeature);
layer.on("mouseover", coordinate);