There seems to be an issue with calling the setMarker() function within another function, as the markers are not being set. It's possible that this is due to the asynchronous nature of the setMarker() function because of the Promise it uses.
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 received from my webDataRocksComponent
getDataForMap() {
this.child.webDataRocks.getData(
{},
(rawData) => {
this.mapComponent.getCities(rawData);
},
(rawData) => {
this.mapComponent.getCities(rawData);
}
);
}