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
– Steve Bennett, Commented Mar 10, 2020 at 11:45
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
– David, Commented Mar 10, 2020 at 13:13
@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
– David, Commented Mar 13, 2020 at 7:58

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

1

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',
    });
});

answered Mar 10, 2020 at 11:48

Steve Bennett

130k45 gold badges188 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Over a year ago

Thanks for the reply - you were the one I quoted! Some of these .json files are 100's of MB. When researching GeoJSON-VT it seems that it's supposed to allow them to load very smoothly. Your mentioned in the other post that Mapbox uses this method by default now. Will this be the case if I load it to the map in the method you described in your answer? I ask because once before I added the layer as a "polygon" type and it was massively slow. Thanks for your attentiveness to Mapbox here on SO.

Steve Bennett Over a year ago

I think you're confusing yourself by thining about geojson-vt. Mapbox-gl-js loads a geojson file statically - the entire thing in one go. So a massive file will take a long time to load. Once it has loaded, it performs about the same as any other vector tile source. You should convert it to vector tiles offline for best loading performance.

David Over a year ago

I think I have done that (Generated a tileset using a command line tool), but I still can't get it to display. Would you mind if I emailed you through your consulting email address to continue this? My partner and I were thinking about needing your assistance on a bigger project if we can only get this started.

Steve Bennett Over a year ago

Yes, feel free.

Collectives™ on Stack Overflow

Adding geoJSON tileset as a layer in Mapbox GL-JS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related