[GIS] Getting multiple functions to work with mouseover event in Leaflet

event listenereventsfunctionjavascriptleaflet

I am making a web mapping app using leaflet and some geoJSON data for a grid. I want to be able to mouseover each grid cell and both highlight that cell AND show a popup of the coordinates. In the code below, I have basically created two functions that should be triggered when the mouseover event occurs: highlightFeature(e) and coordinate(e). After my getJSON request to grab the geoJSON data for the grid, I am using 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 likemouseover: highlightFeature, coordinate,` only the first function works. What am I doing wrong? 

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)
});

Best Answer

JavaScript is error-tolerant only to some extent.

It does not like your 2 function names separated by a comma.

You know that in JS, whitespace / line breaks do not have a particular meaning besides separating identifiers and statements. You also know that in JS, an object is made of a list of property names and values.

Therefore, the mouseover property expects a single value, but you are trying to provide 2, which results in a syntax error in ES5, or equivalent to {coordinate: coordinate} in ES6 (shorthand assignment).

You could either make up a "wrapper" function that would call your 2 functions:

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

Or you could also simply call another layer.on() to attach your 2nd function to the same event:

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