angular - How to add custom tileset that contains shape file data to mapbox along with elevation value

Question

I am using the below code to add shapefile data that has been uploaded to Mapbox using the studio.

    this.map.addSource('contours', {
      type: 'vector',
      url: 'mapbox://darkl1ght.6zev47fo'
    });
    this.map.addLayer({
      "id": "countour-labels",
      "type": "symbol",
      "source": 'contours',
      "source-layer": "contour",
      'layout': {
        'visibility': 'visible',
        'symbol-placement': 'line',
        'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
      },
      'paint': {
        'icon-color': '#877b59',
        'icon-halo-width': 1,
        'text-color': '#877b59',
        'text-halo-width': 1
      }
    });
    this.map.addLayer({
      "id": "countours-lines",
      "type": "line",
      "source": 'contours',
      "source-layer": "contour",
      'layout': {
        'visibility': 'visible',
        'line-join': 'round',
        'line-cap': 'round',
      },
      'paint': {
        'line-color': '#877b59',
        'line-width': 1
      }
    });

But I am getting the below errors.

Source layer "contour" does not exist on source "contours" as specified by style layer "countour-labels"
at i._validateLayer (mapbox-gl.js:35)
    at i.<anonymous> (mapbox-gl.js:35)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (mapbox-gl.js:31)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (mapbox-gl.js:31)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (mapbox-gl.js:31)
    at mapbox-gl.js:35
    at r (mapbox-gl.js:35)
    at mapbox-gl.js:31
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27437)

and

mapbox-gl.js:31 Error: Source layer "contour" does not exist on source "contours" as specified by style layer "countours-lines"
    at i._validateLayer (vendor.js:93908)
    at i.<anonymous> (vendor.js:93908)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (vendor.js:93904)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (vendor.js:93904)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (vendor.js:93904)
    at vendor.js:93908
    at r (vendor.js:93908)
    at vendor.js:93904
    at ZoneDelegate.invoke (polyfills.js:377)
    at Object.onInvoke (vendor.js:41596)

I have been able to add other raster data like tiff files uploaded to Mapbox, but have not been able to add this vector data that contains elevation data. I want to display the labels of the elevation at different lines. And this should show up something like below:

sample image of expectation

I have already viewed this question, but it is related to the raster type of data which I am already able to add. Need assistance for vector type of data.

question from:https://stackoverflow.com/questions/65854848/how-to-add-custom-tileset-that-contains-shape-file-data-to-mapbox-along-with-ele

Answer 1

I found the answer myself.

I figured out that Mapbox's source-layer is this tileset name that the Mapbox gives to the uploaded tileset. check here

When I replaced the source-layer value with the string in the image, the error was removed.