Rendering vector-tiles using Mapbox using react-mapbox-gl

Question

I have a geoJSON file that I convert into vector.tiles using this npm package. I use const tileIndex = geojsonvt(geoJSON). The geoJSON file has the following format and it gets converted without any error.

const geoJSON = {
  type: 'FeatureCollection',
  crs: {
    type: 'name',
    properties: { name: 'urn:ogc:def:crs:OGC:1.3:CRS84' }
  },
  features: [
    {
      properties: [Object],
      geometry: [Object],
      type: 'Feature',
      _id: '5ed7b221a61a4b2970433932'
    },
    ... 1840 more items
 ]
}

The result (geoJSON vector-tiles) that I get after conversion is following -

const tiles = {
    options: {},
    tiles: {
      '0': {
        features: [Array],
        numPoints: 540529,
        numSimplified: 3,
        numFeatures: 1940,
        source: null,
        x: 0,
        y: 0,
        z: 0,
        transformed: false,
        minX: 0.5162953202777778,
        minY: 0.316725863688461,
        maxX: 0.5338655772222223,
        maxY: 0.34955196703359503
      },
      '1': { ... } 
    },
    tileCoords: [
        { z: 0, x: 0, y: 0 },   { z: 1, x: 1, y: 1 },
        { z: 1, x: 1, y: 0 },   { z: 2, x: 3, y: 1 },
        { z: 2, x: 3, y: 0 },   { z: 2, x: 2, y: 1 },
        { z: 3, x: 5, y: 3 },   { z: 3, x: 5, y: 2 },
        { z: 3, x: 4, y: 3 },   { z: 3, x: 4, y: 2 },
        { z: 4, x: 9, y: 5 },   { z: 4, x: 9, y: 4 },
        { z: 4, x: 8, y: 5 },   { z: 5, x: 17, y: 11 },
        { z: 5, x: 17, y: 10 }, { z: 5, x: 16, y: 11 },
        { z: 5, x: 16, y: 10 }, { z: 4, x: 8, y: 4 },
        { z: 2, x: 2, y: 0 },   { z: 1, x: 0, y: 1 },
        { z: 1, x: 0, y: 0 }
      ]
}

After converting a huge geoJSON file with 5000 layers into vector tiles, I am sending this data to the client-side wherein I render Map using React.js and Mapbox*. I use following to render the map but I have not been able to figure out what I am doing wrong. The error that I get says error: layers.jsx-layer-0: layer "jsx-layer-0" must specify a "source-layer"

<Source type="vector" tiles={data.tiles} >
  <Layer  {...dataLayer}/>
</Source>

I went through the documentation of Mapbox for the same but I'm unable to find what I am doing wrong. Any help would be of great help. Thank you very much.

Matherly

share your layers json? and little bit of your react js code. Meaning here is in your layers you need define source layer. example your layers in json like "layers": [ { "id": "rivers", "source": "my-source", "source-layer": "waterway", "type": "line", "paint": { "line-color": "#FFC0CB" } } ] – Trochee

Answer 1

react-mapbox-gl is in many places just a wrapper around mapbox-gl, and if you look at the documentation there:

https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#tiled-sources

You will see that the "tiles" property is only for url sources, where as the "url" property can be used to load a file with tiles:

"url": "http://api.example.com/tilejson.json"

Balbinder

Answer 2

The docs indicate that the source-layer is required field for vector layers.

That said, it certainly opaque as to how this works in a declarative api. Based on example, you might try this to see if it works -

...
const url = 'mapbox://mapbox.mapbox-terrain-v2' 
const source = 'my-source';

<Source id={{source}} name={{source}} type="vector" url={url} tiles={data.tiles} >
    <Layer source={{source}} {...dataLayer}/>
</Source>
...

Marquess

Thanks but unfortunately this does not work. I have an error - Error: layers.jsx-layer-0.source-layer: string expected, object found. – Matherly

Hmm... unfortunately I don't have access to a project, so I am guessing from the docs. I updated with another variation to try, if that is of interest. Otherwise, hope you get it sorted! – Marquess

Answer 3

rendering a layer with it source so you need to referrer to source id in layer + you need to add a source-layer prop like this:

  <Source id='contours' type='vector' url='mapbox://mapbox.mapbox-terrain-v2' tileJsonSource={data.tiles}/>
  <Layer
    id='contours'
    type='line'
    source='contours'
    source-layer='contour'
    paint={{
      'line-color': '#877b59',
      'line-width': 1
    }}
  />
</MapGL>;

Judoka

where are you rendering tiles dataset on the map ? – Matherly

oh sorry i didn't mention that here, try to pass data to tileJsonSource prop, and can you tell me which react map gl you are using ? – Judoka

It is a bit unclear. Can you edit the code above? Thaks – Matherly

edited. just try adding tiles dataset to tileJsonSource prop in Source component. – Judoka

I tried your solution - but it does not work. I get following error - Unable to update <Source> prop: tileJsonSource – Matherly