title: Mapbox GL add json as data source
body: <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>