Mapbox GL add json as data source
<p>I'm currently working on a project that involves Mapbox GL. I'm getting a json file from the server with quiet a lot of location points. This file is having the following structure:</p>

<pre><code>{"location": {"lat": 50.62914, "lon": 5.61972}}
</code></pre>

<p>Now I want to place them on a layer in mapbox. Problem is mapbox only supports GeoJSON. So I'm trying to fix this with the following workaround.</p>

<pre><code>function updateMap(data) {
    console.log("Updating map with " + data.length + " users");
    // Converting my json file into a Geojson format by returning type:point, coordinates for every json entry
    data.forEach(function(d) {
        return {
            "type": "Point",
            "coordinates": [d.location.lon, d.location.lat]
        };
    });
};
</code></pre>

<p>I'm not sure if this is even possible, so please correct me if I'm wrong. I think I have to return it outside the forEach loop otherwise I will only get the first result. </p>

<p>Next up is adding this geojson file as a source for the layer. Something which looks like this:</p>

<pre><code>map.on('load', function () {
    map.addSource('point', {
        "type": "geojson",
        "data": //need to add the points that I returned above here.
    });

    map.addLayer({
        "id": "point",
        "source": "point",
        "type": "circle",
        "paint": {
            "circle-radius": 8,
            "circle-color": "#000"
        }
    });
});
</code></pre>

<p>Only problem is I don't know how to retrieve all the data from the return in the updateMap function.</p>

<p>Thanks for your help in advance! I hope this is possible tho.</p>

<p>Kind regards,</p>

<p>Wouter</p>