Mapbox-gl Hosted S3 - addsource

Question

I am working on this project where I want to add relatively dynamic data (updating every 15minutes) to a mapbox-gl via a serverless solution. I followed this excellent guide on creating serverless vector tiles and have the base tiles working.

My question is now how would you achieve adding a geojson point layer to the map (hosted on a simple HTML page), using something like:

var map = new mapboxgl.Map({
    container: 'map',
    style: style: "https://{domain}/bright.json",
});

var url = 'https://{domain}/geojsonfile.json'

map.addSource('geojsonfile', {
        'type': 'geojson',
        'data': url
    });

map.addLayer({
        'id': 'geojsonfile',
        'type': 'symbol',
        'source': 'geojsonfile',
        'layout': {
            'icon-image': 'rocket-15'
        }
    });

In a serverless vector environment without using Tippecanoe to convert the json file into protobuf vector tiles and instead adding the layer direct to the map from the javascript file. The above js for addsource and addlayer come from this Mapbox guide .

I can get the above js working when I pass in a mapboxgl.accessToken instead of self-hosting; however that's as far as I have been able to get. The geojson file is hosted in a CORS enabled s3 bucket.

Is the issue with loading in the source or displaying the layer? I have also tried modifying the bright.json file to handle the source and layer so that I only have to replace the s3 file, however have had no luck.

Any and all help / suggestions are much appreciated.

Answer 1

After quite a lot of blind trial and error, finally figured out a solution. Turns out my original script was trying to load the layer to the map on-load . However, the tile base load is configured via the style and tile files pre-load .

Therefore, the js addSource needs to be added to the map post-load and then style on-load .

this.map.on('style.load', function () {
    this.pastInitialLoad = true;
    this.map.addSource("geojsonfile", {
        "type": "geojson",
        "data": url }
    );

If anyone else is stuck, these guides / sources were of great help!

https://schwanksta.com/blog/vector-tiles-introduction-pt1

http://fuzzytolerance.info/blog/2016/03/16/Leaflet-to-Mapbox-GL/

https://github.com/mapbox/mapbox-gl-js/issues/2268