Leaflet – Using Leaflet and Geoserver to Highlight Feature After WMS Request

geojsongeoserverleafletweb-mapping

I have a web map, and I'm hoping to make it interactive.

The layer I have is reasonably large, at 15 mb in GeoJSON format 4 mb compressed, so I don't want to load the whole layer as one file. But, I do want to be able to interrogate each feature for around 6 attributes and the geometry.

What I have is:

  • Leaflet 0.5
  • GeoServer 2.2
  • Access to the server and data, happy to customise the data.

What I want is:

  • user can click on a map, and is returned a nice dialog box with feature information in a table
  • the map centers on the feature, possibly zooms, and highlights the feature.

I'm pretty sure this can be achieved using a GeoJSON request (like the example here), but I can't find examples of this anywhere and I'm struggling to implement it myself.

Does someone have a nice example of this?

Best Answer

With lots of help from a Leaflet contributor, I was able to retrieve limited data. It still has a glitch or two and I haven’t cleaned up the code. The app was more or less a kitchen sink for testing. So I apologize in advance.

I used the Leaflet GeoSearch plugin as a starting point for grabbing features with GeoServer filters: contains, and bbox. The maxFeatures parameter is key here which I set as 100. You'll want to set your own params in the var customParams as seen below.

Here is my sandbox app I used. Again, I apoligize in advance for the mess. Let me know if you have any questions

currentAddress = L.layerGroup().addTo(map);

function handleJson(data) {
    geojsonLayer.addData(data);
    geojsonLayer.setStyle(defaultStyle);
    currentAddress.addLayer(geojsonLayer)

}


map.on('geosearch_showlocation', function(result) {

    var rootUrl = 'http://geoserver.capecodgis.com/geoserver/capecodgis/ows';

    var defaultParameters = {
        service : 'WFS',
        version : '1.0.0',
        request : 'GetFeature',
        typeName : 'capecodgis:blocks_2010_4326',
        maxFeatures : 100,
        outputFormat : 'json',
        format_options : 'callback:getJson'

    };

    var customParams = {
        bbox : map.getBounds().toBBoxString(),
        //cql_filter:'CONTAINS(the_geom, POINT(' + thisLatLon + '))'
    };

    var parameters = L.Util.extend(defaultParameters, customParams);

    console.log(rootUrl + L.Util.getParamString(parameters));

    $.ajax({
        url : rootUrl + L.Util.getParamString(parameters),
        dataType : 'jsonp',
        jsonpCallback : 'getJson',
        success : handleJson
    });
});
Related Question