I am calling an AJAX function to fetch data from the server, and adding that data to the userLayer variable within my ajax function. Hence once the call is executed, it should be having the data within it. However, it returns undefined and when I do console.log(map.hasLayer(userLayer), "check if layer exists"), it returns false when technically it should return true, implying that something is wrong within the AJAX function or the AJAX call I am making. I am using Promise as well. Below is the code:
Calling the addUserLayerTreemail AJAX function
userLayer = this.addUserLayerTreemail(
$loadingContent,
$loadingDiv,
treeLayers,
map,
heritage_cluster_layer_view_18,
flowering_cluster_layer_view_18,
IMP_FIELDS,
suggestion,
userPlottedLayerView18Options,
userLayer,
$speciesError
).then( function(response){
//the map should have userLayer after the ajax call, but it returns false
console.log(map.hasLayer(userLayer), "check if layer exists")
setSearchState(true);
$mapSearch.blur();
}).catch(function(err){
console.log("error caught", err)
});
Defining the addUserLayerTreemail AJAX function
addUserLayerTreemail(
$loadingContent,
$loadingDiv,
treeLayers,
map,
heritage_cluster_layer_view_18,
flowering_cluster_layer_view_18,
IMP_FIELDS,
suggestion,
userPlottedLayerView18Options,
userLayer,
$speciesError
) {
$loadingContent.text('Loading Search Results');
addClass($loadingDiv, 'show');
removeClass($speciesError, 'show-error');
// remove all layers in case they are present
for (let layer in treeLayers) {
if (map.hasLayer(treeLayers[layer])) {
treeLayers[layer].removeFrom(map);
}
}
if (map.hasLayer(heritage_cluster_layer_view_18)) {
heritage_cluster_layer_view_18.removeFrom(map);
}
if (map.hasLayer(flowering_cluster_layer_view_18)) {
flowering_cluster_layer_view_18.removeFrom(map);
}
if(map.hasLayer(userLayer)) {
userLayer.removeFrom(map);
}
// let checked = this.getCurrentFilter(),
const featureType = 'USERTREE';
let queryString = '';
suggestion = suggestion.toLowerCase();
let $selectedOptionSearch = $('.mapFilterBtns.is-active').data('value');
let all_trees="";
console.log($('#mapSearch').val(), "searched value")
let searchText= $('#mapSearch').val();
let configData = {"searchText": searchText, "searchType" : $selectedOptionSearch};
console.log("config", configData)
return new Promise(function(resolve, reject){
$.ajax({
url: "../apis/Search",
method: 'GET',
dataType: 'json',
data : configData,
contentType: 'application/json',
success: response => {
console.log("ajax response in the ajax function",response);
resolve(response);
let conditionalVal = " or ";
let treeID = "";
for(let i=0; i<response.length; i++) {
treeID = response[i]['TreeID']
if(i==0) {
all_trees = `${IMP_FIELDS.TREEMAIL_SEARCH} like '%${treeID}%'`;
} else {
all_trees += conditionalVal + `${IMP_FIELDS.TREEMAIL_SEARCH} like '%${treeID}%'`;
}
}
console.log("all trees here",all_trees);
queryString = all_trees + ` and Actual_Tree_Type like '%${featureType}%'`;
let isSearch = true;
let layerOptions = $.extend(
{
where: queryString
},
userPlottedLayerView18Options
);
layerOptions.url = mapLayers.userPlantedLayer;
userLayer = L.esri.featureLayer(layerOptions);
userLayer
.query()
.where(queryString)
.run((err, featureCollection, response) => {
//adding the data to userLayer and then adding userLayer to map here
userLayer.addTo(map);
});
//Returning the userLayer here
return userLayer;
},
error : function(err){
reject(err, "printing error here");
}
});
})
}