2

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

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);
  • 1
    This worked perfectly. I went with option #2; I just did 2 layer.on("mouseover", ...) calls. Both the highlight and the tooltip displays now. – gwydion93 Aug 8 '16 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.