Custom tileset as vector source does not work

[Xinayder]

Describe the bug Loading Mapbox Studio tilesets as a VectorSource does not work, you have to manually add the tileset to a Mapbox Style in Mapbox Studio for the tileset to be rendered.

To Reproduce Run the CustomVectorSource example, replacing the tileset ID with any custom tileset you have uploaded to Mapbox.

Expected behavior The tileset should be rendered on the map.

Versions (please complete the following information):

• Platform: Android
• Device: Poco F1
• Emulator/ Simulator: no
• OS: Android 10
• react-native-mapbox-gl Version 8.1.0-rc.5
• React Native Version 0.63.3

Additional context I've contacted Mapbox and they told me it is possible to load tilesets dynamically without having to manually add them to a style, however, that is not the case, as any custom tilesets are not being rendered in the mobile app, not even the example one.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[natew]

I believe I'm running into this too, on web I can load a custom vector source just fine, but I've tried a number of combinations now with this library and so far haven't been able to get anything to load/show.

[mspindelhirn]

I got it working for me by adding sourceLayerID to the FillLayer with the ID of the layer inside of my custom vector source. In MapBox Studio open the tileset and see on the left hand side there should a identifier for the layer inside of the source.

[natew]

@mspindelhirn I can see the map is loading the tiles, it requests the pbf's properly.

My endpoint returns:

{"tilejson":"2.2.0","id":"publiczcta5","name":"public.zcta5","description":null,"version":"1.0.0","attribution":"","template":null,"legend":null,"scheme":"xyz","tiles":["http://localhost:3005/public.zcta5/{z}/{x}/{y}.pbf"],"grids":null,"data":null,"minzoom":0,"maxzoom":30,"bounds":[-180,-90,180,90],"center":null}

And I've set sourceLayerID and sourceID to publiczcta5 and VectorSource.id to publiczcta5. I've tried every combination here of different ID's, but nothing shows. I've made sure the layer is above other ones that work, and generally poked at it a ton. May need to get in touch with mapbox...

[mspindelhirn]

Ok. Had some more trouble and figured something else out. You cannot add VectorSource elements after the map style has loaded. So if you need to load the tileset ID you need to wait for that and then render the map together with the VectorSource and all. At least thats my guess why sometimes the vector showed up and sometimes it did not. Plus I had a look at the andoid code and that seems logical conclusion after finding this pioece of code: https://github.com/react-native-mapbox-gl/maps/blob/master/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTSource.java#L122

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mspindelhirn]

Unstale plz.

Still have hope that some dev finds a second to at least confirm or deny my suspicion. Plus I still think this could be improved whatever the reason is.

[ferdicus]

hey all, can someone please set up a small asset-light example to reproduce this issue?
I would assume someone would be more inclined to tackle this, with one less hurdle in the way.

Cheers

[asad451]

Is there any resolution for this issue? The custom tileset created is set to public. Any help would be appreciated!

            style.addSource(
                VectorSource("terrain-data", "mapbox://customtilesetID")
            )

            style.addLayer(
                LineLayer("terrain-data1", "terrain-data")
                    .withProperties(
                        PropertyFactory.lineJoin(Property.LINE_JOIN_ROUND),
                        PropertyFactory.lineCap(Property.LINE_CAP_ROUND),
                        PropertyFactory.lineColor(Color.parseColor("#ff69b4")),
                        PropertyFactory.lineWidth(1.9f)
                    )
            )

@ferdicus @mspindelhirn

[asad451]

I got it working after adding the name of source layer (which can be found on top left side when you open a custom tileset), like below

LineLayer("terrain-data1", "terrain-data").withSourceLayer("name_of_source_layer")

[mfazekas]

Closing, please reopen with an example we can use to reproduce the issue.