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.

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" } } ] — Muni Kumar Gundu
– Muni Kumar Gundu, Commented Jun 8, 2020 at 16:52

chrismarx · Accepted Answer · 2022-04-13 20:25:32Z

0

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"

answered Apr 13, 2022 at 20:25

chrismarx

12.9k11 gold badges89 silver badges101 bronze badges

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

Comments

nrako · Accepted Answer · 2020-06-12 17:32:37Z

-1

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>
...

edited Jun 12, 2020 at 17:32

answered Jun 10, 2020 at 17:35

nrako

3,01922 silver badges32 bronze badges

2 Comments

relu Over a year ago

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

nrako Over a year ago

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!

adel · Accepted Answer · 2020-06-13 17:20:57Z

-1

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>;

edited Jun 13, 2020 at 17:20

answered Jun 12, 2020 at 20:01

adel

3,5051 gold badge10 silver badges20 bronze badges

5 Comments

relu Over a year ago

where are you rendering tiles dataset on the map ?

adel Over a year ago

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 ?

relu Over a year ago

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

adel Over a year ago

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

relu Over a year ago

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

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related