[GIS] Leaflet search GeoServer layer

geoserverleafletweb-mapping

I'm new to web mapping, but I've managed to put together a fairly simple web map using Leaflet:
http://www.hcswgis.com/globalmapper/

It has most of the functionality that I want using the available plugins; One feature that it's lacking is a way to search by a parcel ID, which in turn puts a marker where that parcel is, and zooms into it.

In my web map there is a parcel Mapbox layer, but I don't believe there is a way to do what I'm trying to accomplish with that layer because it's tiles and a UTFGrid.

I thought about adding the parcel layer onto my GeoServer. From that I thought I could potentially use the plugin https://github.com/stefanocudini/leaflet-search to query the GeoServer parcel layer to find whatever parcel ID is being searched and zoom into it.

Is that possible?

I'm open to any alternative solutions that accomplishes the goal. Keep in mind we're talking about around 80,000 features to search.

Best Answer

Although I've not looked at any leaflet plugins the that might make your life easier, you could typically carry out a WFS request to query the data and filter by an attribute which is what you're doing here.

I'd look into GetFeature requests

Related Solutions

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

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

Geoserver to Leaflet – Getting WFS Data from Geoserver into Leaflet

While you can set up a proxy with your webserver, there is an easier way.

First, enable JSONP in GeoServer.

Then form your data requests like this:

var owsrootUrl = 'https://<GEOSERVER URL - CHANGEME>/geoserver/ows';

var defaultParameters = {
    service : 'WFS',
    version : '2.0',
    request : 'GetFeature',
    typeName : '<WORKSPACE:LAYERNAME - CHANGEME>',
    outputFormat : 'text/javascript',
    format_options : 'callback:getJson',
    SrsName : 'EPSG:4326'
};

var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);

var WFSLayer = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : 'getJson',
    success : function (response) {
        WFSLayer = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 200};
                layer.bindPopup("Popup text, access attributes with feature.properties.ATTRIBUTE_NAME"
                    ,popupOptions);
            }
        }).addTo(map);
    }
});

This has the additional advantage on working on your test server, as it avoids cross site scripting issues due to the use of JSONP (quoted json objects, from my understanding).

For an example of this in action, see these two maps:

Code here (for posterity).

By the way, I use nginx for the webserver and have the proxy stuff working. If you would like to know how please let me know and I'll edit something in here.

EDIT: another way of getting rid of this error is enabling CORS in either Tomcat (or Jetty, maybe?) or your reverse proxy.

Best Answer

Related Solutions

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

Geoserver to Leaflet – Getting WFS Data from Geoserver into Leaflet

Related Question