Fetching results(location Data) from leaflet Geocoder through callback function

Question

I am working on an angular project that uses leaflet framework for implementing geocoder. My current requirement is to use geocoder, retrieve the lat,lng from the results and emit them to the parent component which would then trigger an event in the parent component.

But the issue remains that I get the results in an async function and I am not able to emit from inside it, or get the data outside to emit it.

This is the geocoder code I am using:

let grocoder = L.Control.geocoder({
   placeholder:"Search",
   geocoder: this.mapGeocoder
})
.on('markgeocoder', this.getGeo);

Now I plan on using the value that I get in this.getGeo and send it to the parent component. FYI sendData is the @output() variable of type emitter.

getGeo(res){
   var lat = res.geocode.center.lat
   this.sendData.emit(lat);
}

I am pretty unfamiliar with dealing with promises etc. So is there any way I can do this. I know it has something to do with resolving the promise but I am not able to understand how to implement it.

Any help is appreciated, Thanks!!

Answer 1

So if i have understood your question correctly, you are trying to emit an @Output value in an async function. I dont really know what geocoder or so is but with a little research i found an example and i am going to clarify that as good as possible.

public getAddress(query: string) {
return new Promise((resolve, reject) => {
    this.geocoder.geocode({ searchText: query }, result => {
        if(result.Response.View.length > 0) {
            if(result.Response.View[0].Result.length > 0) {
                resolve(result.Response.View[0].Result);
            } else {
                reject({ message: "no results found" });
            }
        } else {
            reject({ message: "no results found" });
        }
    }, error => {
        reject(error);
    });
});}

This function returns a promise, like the name says that's an operation which promises you to return a value after something is completed, the thing with an API call as an example is that it needs some time to call the endpoint and receive a response. You can either sleep your program and await it or define what should happen after the process is completed and let the program continue on.

resolve() just fulfills the promise and lets the program excecute the function defined in the then block.

what reject() does should be clear, it just says something went wrong an that can then be catched by the catch block in the then function block.

So now you have defined a promised action and what the promise it self is, now you want to tell the program what to do when the promise is fullfilled, you can then it in your program.

see this :

    this.getAddress(this.yourQuery).then(result => {
        this.locations = <Array<any>>result;
    }, error => {
        console.error(error);
    });

this then calls the function and lets you program move on, after the promise is fullfilled it will return to the then function block and do whatever you have specified in this case this.locations is assigned the value of the result.

you can then emit the Output value in the then function block because thats not on an async thread anymore. (you cannot bind an angular emitter value in asynchronous function or on a async thread)

i hope that helped to code itself is from : https://developer.here.com/blog/using-the-here-geocoder-api-for-javascript-in-an-angular-application

like i said i don't know the api and the usecase but i hope that explanation clarified how to define a promise and await it.

just ask if you have questions, i am not a pro with that to i cant just explain the surface functionality.

i can also recommend this video : https://www.youtube.com/watch?v=vn3tm0quoqE&t=194s. he does great short little videos for such things.

hope that has helped.