[GIS] Making WFS in Leaflet app hoverable and clickable

geojsongeoserverleafletwfs

I have made a WFS on Geoserver for a simple grid shapefile to server to a web mapping app. Within the web mapping app, I want the grid to be hoverable and clickable. Specifically, I want to be able to highlight a particular grid cell when the mouse hovers over that cell and keep the rest of the grid hidden. I have my wfs parameters defined as such and am receiving the json/geojson correctyl in my web app:

 var url = 'http://localhost:8080/geoserver/ows'; 
 var defaultParameters = {
   service: 'WFS',
   version: '1.1.0',
   request: 'GetFeature',
   typeName: 'FGCMS:1_Deg_Grid_polygon',
   //maxFeatures: 200,
   outputFormat: 'application/json',
   format_options: 'callback:getJson',
   SrsName : 'EPSG:4326'
 };

I want to add this functionality (hover, click, etc…) in the front end in my web app code but I have not found a specific Leaflet plugin that might work (I am not seeing anything specifically in the API) and I do not know how to just add to the json data configuration.

In the code below, I have my ajax request with the grid json configured to fillOpacity: 0. Could I just add something like hoverable: true?

var WFSLayer = null;
var ajax = $.ajax({ 
  url: URL,
  dataType: 'json',
  jsonpCallback: 'getJson',
  //async: false, 
  error: function() { console.log('Oh snap!'); },
  success: function(response) {
     WFSLayer = L.geoJson(response, {
        style: function (feature) {
            return {
                //fillColor: 'FFFFFF',
                fillOpacity: 0
            };
        },

Best Answer

You don't need a plugin - an instance of L.GeoJSON can be made interactive by providing some event handlers, e.g.:

success: function(response) {
    WFSLayer = L.geoJson(response, {
        style: function (feature) {
            return {
                //fillColor: 'FFFFFF',
                fillOpacity: 0
            };
        }
    };

    WFSLayer.on('mouseover', function(ev) {
        // React to the user hovering over something here.
    });

    WFSLayer.on('click', function(ev) {
        // React to the user clicking over something here.
    });

}

This needs no special setup. If you read the Leaflet documentation carefully, you'll notice that L.GeoJSON handles event delegation like L.FeatureGroup, and that L.Polygons are interactive by default (they fire mouseover events, click events and so on).

What those event handlers have to do will depend on your specific needs. Do they need to reset the opacity of the polygon involved? Do they need to display a popup? Do they need to display some attributes in a table outside the map? That's up to you.

Specifically, I want to be able to highlight a particular grid cell when the mouse hovers over that cell

For that, you might need something like

    WFSLayer.on('mouseover', function(ev) {
        ev.target.options.fillOpacity = 1;
    });

    WFSLayer.on('mouseout', function(ev) {
        ev.target.options.fillOpacity = 0;
    });
Related Question