Fetch data from database and plot on map.

prateek singh 21 Reputation points
2022-08-19T20:19:18.367+00:00

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.

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
358 questions
{count} votes

Accepted answer
  1. rbrundritt 7,221 Reputation points Microsoft Employee
    2022-08-22T15:21:00.43+00:00

    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"  
        }))  
    
    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful