Leaflet make function synchronous

Question

I tried to call the setMarker() function in another function. But the markers ain´t set. I don´t know why, but maybe because the setMarker() function is async because of the Promise.

getCities()

getCities(rawData) {
    for (const index in rawData['data']) {
        if (rawData.meta.c0Name == 'city') {
            const city: string = rawData['data'][index]['c0'];

            if (city != undefined) {
                this.setMarker(city);
            }
        }
    }

setMarker()

 setMarker(location: string) {
    const provider = new OpenStreetMapProvider();

    const query_promise = provider.search({
        query: location,
    });

    query_promise.then(
        (value) => {
            // Success!
            const x_coor = value[0].x;
            const y_coor = value[0].y;
            const label = value[0].label;
            this.citiesLayer = [
                L.marker([y_coor, x_coor])
                    .bindPopup('<b>Found location</b><br>' + label)
                    .addTo(this.citiesLayerGroup),
            ];
        },
        (reason) => {
            console.log(reason); // Error!
        }
    );
}

The rawData I get from my webDataRocksComponent

    getDataForMap() {
    this.child.webDataRocks.getData(
        {},
        (rawData) => {
            this.mapComponent.getCities(rawData);
        },
        (rawData) => {
            this.mapComponent.getCities(rawData);
        }
    );
}

score 0 · Answer 1 · answered Oct 27 '21 at 07:26

Your code looks good, be sure that this.citiesLayerGroup is initialized and added to the map:

this.citiesLayerGroup = L.featureGroup().addTo(map); // or L.layerGroup

Also I think you want to push the new marker into the array and not overwrite it:

if(!this.citiesLayer){
   this.citiesLayer = []
}

this.citiesLayer.push(L.marker([y_coor, x_coor])
                    .bindPopup('<b>Found location</b><br>' + label)
                    .addTo(this.citiesLayerGroup),
);

If it is still not working check if this is the right context:

var that = this;
query_promise.then(
        (value) => {
            // Success!
            const x_coor = value[0].x;
            const y_coor = value[0].y;
            const label = value[0].label;
console.log(this);
console.log(that)
            that.citiesLayer = [  // changed to that
                L.marker([y_coor, x_coor])
                    .bindPopup('<b>Found location</b><br>' + label)
                    .addTo(that.citiesLayerGroup), // changed to that
            ];
        },
        (reason) => {
            console.log(reason); // Error!
        }
    );

Unfortunately it does not work. I figured out, that the problem is maybe the callback from the WebDataRocksComponent. Because if I add `ngAfterViewInit(): void {this.setMarker('New York City');}` it works, but if i do the same on the first line on getCities(), it won´t work — Patman, Oct 27 '21 at 08:22
Have you tested if in `getCities` the value `city` is defined? `console.log(city)` and try if it works with `setMarker('New York City')` in `getCities` — Falke Design, Oct 27 '21 at 09:33

Leaflet make function synchronous

getCities()

setMarker()

1 Answers1