CODEWITHSUNDEEP
reactjsmapboxmapbox-gl-jsmapbox-glvector-tiles
relu
relu

Reputation: 353

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

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.

Upvotes: 10

Views: 4132

Answers (3)

chrismarx
chrismarx

Reputation: 12555

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"

Upvotes: 0

adel
adel

Reputation: 3507

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

Upvotes: -1

nrako
nrako

Reputation: 3009

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

Upvotes: -1

Related Questions