0

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
            };
        },
2
  • can you narrow this down to a single question?
    – Ian Turton
    Commented Aug 3, 2016 at 16:09
  • I just changed the question to narrow down my focus. Let me know if I need to make further changes.
    – gwydion93
    Commented Aug 3, 2016 at 18:12

1 Answer 1

3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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