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