use with WFS (geoserver)

[keno-teixeira]

I need a help to use library leaflet.control.search. In example json :

map.addControl( new L.Control.Search({
    url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}', 
    jsonpParam: 'json_callback',
    propertyName: 'display_name',
    propertyLoc: ['lat','lon'],
    markerLocation: true,
    autoType: false,
    autoCollapse: true,
    minLength: 2,
    zoom:10
}) );

alter this URL for

map.addControl( new L.Control.Search({
   url: 'http://localhost/geoserver/ows?service=WFS&version=1.1.1&request=GetFeature&typeName=sedhab%3Alote_siturb&CQL_FILTER=conjunto%20like%20%27{s}%27&outputFormat=application/json&format_options=json&SrsName=EPSG%3A4326&osm_type=N&limit=100&addressdetails=0&json_callback=L.Control.Search.callJsonp',
   jsonpParam: 'json_callback',
   propertyName: 'display_name',
   propertyLoc: ['lat','lon'],
   markerLocation: true,
   autoType: false,
   autoCollapse: true,
   minLength: 2,
   zoom:10
}) );

I would like ajustar for my WSF(geoserver), you can get help us.

[Yorit]

I am looking something like this. Does it works for you?

[rmarzocchi84]

any news about this option?

There is a public WFS performed for search using mapstore by "Comune di Genova"

https://mappe.comune.genova.it/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application%2Fjson&maxFeatures=20&typeName=SITGEO:V_ASTE_STRADALI_TOPONIMO_SUB&cql_filter=(NOMEVIA+ILIKE+%27%25veilino%25%27)&sortBy=ID&srsName=EPSG:4326&startIndex=0

I try using leaflet-search but without success

  var searchOpts = {
		url: 'https://mappe.comune.genova.it/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application%2Fjson&maxFeatures=20&typeName=SITGEO:V_ASTE_STRADALI_TOPONIMO_SUB',
		//jsonpParam: 'json_callback',
		formatData: formatJSON,
		zoom: 17,
		minLength: 2,
		autoType: false,
		marker: {
			icon: false,
			animate: false
		}
	};

[lefcgis]

Doesn't work

[OculiViridi]

I had the same issue, so the search by ajax request didn't seem to work. But, after a very very long journey through the library and with a little help from GeoServer documentation and tests on my GeoServer instance, I was finally able to let it work! 😄

This is the code sample.

var searchControl = new L.Control.Search({
    //layer: 
    //sourceData: 
    url: `https://myserver.dev/geoserver/wfs?
        &callback=L.Control.Search.callJsonp
        &service=WFS
        &version=1.1.0
        &request=GetFeature
        &typename=domain%3Amy_layer
        &CQL_FILTER=Field%20LIKE%20%27%25{s}%25%27
        &outputFormat=text/javascript
        &format_options=callback%3A%20L.Control.Search.callJsonp
        &srsname=EPSG%3A4326
        &limit=10`,
        
    /* 
     * In the URL please note the following:
     * - &callback: parameter name, according to GeoServer documentation
     * - &CQL_FILTER: contains the <Field LIKE 'value'> format and uses '%value%' (the %25 before and after {s})
     * - &outputFormat=text/javascript
     * - &format_options=callback%3A%20L.Control.Search.callJsonp
     */
     
    jsonpParam: 'callback',
    
    /* 
     * A custom function to format data according to the expected "indexed data object" used in leaflet-search.js.
     * Starting from the WFS JSON result, a new JSON is made that looks like:
     * {
     *      Arizona: LatLng { lat: 42.00015156, lng: 13.244107615, layer: defaultOptions: {pane: 'overlayPane', attribution: null, bubblingMouseEvents: true}
     *          feature: {type: 'Feature', id: 'radon_concentrazioni_medie.5491', geometry: {…}, geometry_name: 'Geom', properties: {...}, ...}
     *          options: {pane: 'overlayPane', attribution: null, bubblingMouseEvents: true, fill: true, smoothFactor: 1, ...}
     *          _bounds: LatLngBounds {_southWest: LatLng, _northEast: LatLng}
     *          _eventParents: {19078: NewClass}
     *          _initHooksCalled: true
     *          _latlngs: [Array(1)]
     *          _leaflet_id: 19077 }, 
     *      Colorado: LatLng {lat: 45.652882945, lng: 11.18488668, layer: ...},
     *      Texas: LatLng {lat: 45.308933205, lng: 11.861608145, layer: ...}
     * }
     */
    formatData: function (json) {
        let result = {};
        
        if (json['type'] === 'FeatureCollection') {
            for(let i = 0; i < json['features'].length; i++) {
                let layer = L.geoJson(json['features'][i]).getLayers()[0];
                let loc = layer.getBounds().getCenter();
                loc.layer = layer;
                result[this._getPath(json['features'][i]['properties'], this.options.propertyName)] = loc;
            }
        }

        return result;
    },
    propertyName: 'title', // Set the desired property used to make the search
    propertyLoc: ['lat','lon'],
    marker: false,
    textErr: 'Not found',
    textCancel: 'Cancel',
    textPlaceholder: 'Search...',
    minLength: 2,
    autoType: false,
    autoCollapse: false,
    initial: false,
});

let me = this;

searchControl
    .on('search:locationfound', function (e) {
        /*
         * Here you can add a call to another function that using the 'searchControl.options.propertyName' and 'e.layer.feature.properties.MyField'
         * can make another call to WFS to get the selected geometry and add and highlight it on the map.
         */
    })
    .on('search:collapsed', function (e) {
        if (me.map._popup)
            me.map.closePopup();
    });

this.map.addControl(searchControl);

[shkril]

When I'm using this code, I have an error: Uncaught TypeError: this._getPath is not a function. Can anyone help me?