Re: leaflet.control-search ajax-jquery call for geoserver

[k_man_au]

If you run the query manually do you get valid JSON back? Best rule that out first... 

On Monday, August 25, 2014 2:02:30 PM UTC+10, Mitchel Blais wrote:

I am having trouble calling the ajax-jquery function for the leaflet-search function. Everytime I search it returns 'undefined'....Can someone help me with this? Is it because I have it ordered wrong? Here is the code:

function searchByAjax(uwi, callResponse)

{

$.ajax({

url: 'http://localhost:8080/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:bc_well_data_wgs&outputFormat=application/json',

type: 'GET',

data: {bc_well_data_wgs: uwi},

dataType: 'json',

success: function(json) {

callResponse(json);

}

});

}

map.addControl( new L.Control.Search({callData: searchByAjax, text:'UWI...', markerLocation: true}) );

Sooo the bc_well_data_wgs is the table and the 'uwi' is the field I want to search on geoserver. Is this the correct layout?

Thanks,

Mitch

[Cinthia Gonzalez]

Hello, Did you find a solution for this, I really need to  do a serach like this, please if you find  a solution share it with us

Thank you so much

[Mitchel Blais]

Hi Cynthia,

Here is my code I ended with I was able to add a filter to my request the "url + text + end url" as you see in my ajax request, I search by the property name "uwi". Once found it places a marker based on the lat and lon. 

var url = "http://localhost:8085/geoserver/WellKnown/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=WellKnown:bc_well_data_wgs&maxFeatures=10&outputFormat=application/json&filter=<filter><PropertyIsEqualTo><PropertyName>uwi</PropertyName><Literal>";

var endUrl = "</Literal></PropertyIsEqualTo></filter>";

function searchByAjax(text, callResponse)//callback for 3rd party ajax requests

{

$.ajax({

url: url + text + endUrl,

type: 'GET',

dataType: 'json',

success: function(searchData){

searchCoord.addData(searchData);

map.fitBounds(searchCoord.getBounds());

}

})

};

var searchCoord = new L.GeoJSON(searchData, {

pointToLayer: function(feature, layer) {

        return new L.marker([feature.properties.lat, feature.properties.lon], {icon: bcWellIcon});

    },

onEachFeature: function (feature, layer) {

    var popupContent = '';

   

    if (feature.properties && feature.properties.uwi) {

  popupContent = "<strong>UWI:</strong>" + " " + feature.properties.uwi + "<br/>" + "<strong>OPERATOR:</strong>" + " " + feature.properties.oper_abbre + "<br/>";

    }

layer.bindPopup(popupContent + '<a href="report/bcwellReport.html?" target="_blank"><i class="fa fa-info-circle fa-2x"></i></a>');

}

}).addTo(map);

map.addControl( new L.Control.Search({callData: searchByAjax, text:'UWI...', markerLocation: true}) );

[Cinthia Gonzalez]

Thank you so much for your help Mitchel....I just notice that searchData is not defined....can you tell me what it is about please. Thanks fot the help again

[Mitchel Blais]

Hi Cinthia,

That was only a portion of my code the var searchData was declared at the very top of my code like so, hope this helps

var searchData = '';