Fetch data from database and plot on map.

Question

I have a few coordinates (latitudes and longitudes) stored on my database, I have fetched them and converted them in form of datasource, but on adding it into the datasource there is nothing visible on map.

const points = [];  
        async function getStores() {  
            const res = await fetch('/api/v1/stores');  
            const data = await res.json();  
            let coordinates = data.data;  
  
            coordinates.forEach(myFunction)  
  
            function myFunction(value, index, array) {  
                points.push(new atlas.data.Point(value.coordinates));  
                // points.push(value.coordinates);  
  
            }  
            return;  
        }  
  
        getStores()  
        dataSource.add(points);  
        // console.log(points)  
  
        map.layers.add(new atlas.layer.BubbleLayer(dataSource, null, {  
            radius: 5,  
            strokeColor: "green",  
            strokeWidth: 6,  
            color: "white"  
        }))  
  

The getStores function does the task of fetching the data and converting it into geoJSON from, but when i add it into the dataSource, and use a bubble layer to present it, it shows nothing. What am i doing wrong.

Answer 1

To start off, based on your code, the data returned by your service is an array containing arrays of numbers, [longitude, latitude] like this:

   {  
   	data: [  
   		[lon0, lat0],  
   		[lon1, lat1],  
   		[lon2, lat2],  
   		[lon3, lat3]  
   	]  
   }  

If this is not the case, then your parsing logic may need some modifications.

As for the rest of your code, the getStores function is async, but itself is not awaited, so I think the empty array is being added to the data source before the data is loaded. A simple solution is to add the data to the datasource in your getStores function. Here is a modified version of your code:

   async function getStores() {  
   	const points = [];  
   	 const res = await fetch('/api/v1/stores');  
   	 const data = await res.json();  
   	 let coordinates = data.data;  
     
   	 coordinates.forEach(myFunction)  
     
   	 function myFunction(value, index, array) {  
   		 points.push(new atlas.data.Point(value.coordinates));  
   	 }  
   	   
   	 dataSource.add(points);  
   	 return;  
    }  
     
    getStores()  
     
    map.layers.add(new atlas.layer.BubbleLayer(dataSource, null, {  
   	 radius: 5,  
   	 strokeColor: "green",  
   	 strokeWidth: 6,  
   	 color: "white"  
    }))