Adding geoJSON tileset as a layer in Mapbox GL-JS

Question

I am wanting to add a geoJSON tileset to my map as a layer. (This is weather radar data- it will be hosted on my server as the data refreshes every few minutes.) How do I do this and style it? Maybe this seems like a dumb question but I have searched far and wide without a solution. I see this Mapbox GL-JS vector tileset example but it does not show how to make a vector tileset from geoJSON.

All I would like to do is add the layer and style it by color.

The closest example code I can find from Mapbox is:

   map.on('load', function() {
    map.addSource('mapbox-terrain', {
        type: 'vector',
        url: 'mapbox://mapbox.mapbox-terrain-v2'
    });
    map.addLayer({
        'id': 'terrain-data',
        'type': 'line',
        'source': 'mapbox-terrain',
        'source-layer': 'contour',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#ff69b4',
            'line-width': 1
        }
    });
});

However, no matter how I try to edit it, I don't understand how to change the source to geoJSON. (I have tried changing type to geoJSON, and changing the URL to my .JSON file, for example. The only result is that nothing is displayed, even with their default styling.

Here is how my data is arranged, and how I want to style :

   {
    "type": "Feature",
    "geometry": {      "type": "Polygon",
      "coordinates": [
        [
          [-98.04771180146541, 29.69276273017396],
          [-98.04989507423406, 29.691557294069924],
          [-98.05007422056916, 29.691808116379576],
          [-98.04787303016978, 29.69298847287841],
          [-98.04771180146541, 29.69276273017396]
        ]
      ]
     },
     "properties": {
        "sweep": 1,
        "sweepTime": "2017-02-20T04:40:19Z",
        "elevAngle": 0.519104,
        "value": 21.0, //  << this value determines color of polygon styling (0-70)
        "radialAng": 238.16986,
        "begGateRan": 2249.9092,
        "endGateRan": 2499.8992,
        "heightRel": 20.683022,
        "heightASL": 213.62143
     }
   }

I hope I am not confused, but in this Stack Overflow answer, Steve Bennett explains to someone on a related topic :

To the best of my knowledge, Mapbox-GL-JS uses GeoJSON-VT to automatically convert client-side-loaded GeoJSON files into vector tiles within the browser

So it seems this is possible to do - but how? Most of the documentation is for using Mapbox Studio, and I am just trying to do it through Javascript. Any help is appreciated as this has been an issue for a long time and I am now dedicating all of my time to tackling it.

As a final visual, this is what I what I am trying to accomplish over the map :

What do you mean by a GeoJSON "tileset" exactly? Mapbox-gl-js only supports vector tiles .pbf format. Do you just mean a GeoJSON source? — Steve Bennett
From what I understand, yes - a source. But I need the behavior of a tileset (I explained in your answer below what I mean, please do check it if you have a chance) — David
@MuhammadImranSiddique at this point I have made vector tiles, but cannot add them to the map for some reason using map.addLayer and map.addSource. The end result is always the same, the data will not load. — David

Steve Bennett Steve Bennett · Accepted Answer · 2020-03-10T11:48:07

If what you mean is a "GeoJSON source" rather than a "GeoJSON tileset", it's as simple as:


map.on('load', function() {
    map.addSource('mysource', {
        type: 'geojson',
        url: 'http://example.com/mycode.geojson'
    });
    map.addLayer({
        'id': 'mylayer',
        'type': 'line',
        'source': 'mysource',
    });
});

Adding geoJSON tileset as a layer in Mapbox GL-JS

1 Answers