Third party vector tiles not supported with v10

[veb-ioki]

Does anyone know, if this is simply not supported by mapbox anymore?

In our project, we rely on vector tiles from third party providers. Up to now, we are using pre v10 version of this repo and have a MapView component which renders customised styles, sourcing vector tiles from HERE.com (see below), which worked out nicely.

With v10 implementation, this does not work anymore it seems.

Environment

• Mapbox (GL) implementation: v10
• Mapbox (GL) version: 10.7.0
• @rnmapbox/maps Version #main
• Platform: Android
• React Native Version 0.68.2
• Platform OS: Android 11, 12
• Device: e.g. Samsung Galaxy A03
• Emulator/ Simulator: as well
• Dev OS: OSX 12.5SOurce.1

Standalone component to reproduce

The component

<MapboxGL.MapView
        styleURL={getMapStyle(lightMode)}
        [...]
>

returning a style json such as:

const lightModeStyle = {
  version: 8,
  name: STYLE_NAME,
  metadata: {},
  sources: {
    omv: {
      type: 'vector',
      tiles: [
        'https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=<HERE_API_KEY>',
      ],
    },
  },
  glyphs: 'https://assets.vector.hereapi.com/fonts/{fontstack}/{range}.pbf',
  layers: [
    {
      id: 'background',
      type: 'background',
      paint: {
        'background-color': 'hsl(40, 0%, 78%)',
      },
     [...]

Observed behavior and steps to reproduce

After upgrading to v10 implementation of rnmapbox, loading of the custom styles fails with:

Mapbox error Map load failed: {type=style, message=Failed to load style: Expected URL scheme 'http' or 'https' 
but no colon was found, begin=3034414799} {"level": "error", "message": "Map load failed: 
{type=style, message=Failed to load style: Expected URL scheme 'http' or 'https' but no colon was found,
begin=3034414799}", "tag": "RCTMGLMapView"}

Expected behavior

Dumb comment ... still: Tile source to be loaded as before

Notes / preliminary analysis

Searching the Mapbox Maps SDK (iOS and Android) docs for anything related to vector tiles or custom tile / vector sources, I can only find this or this, both referring to legacy SDK versions.

Nothing in the current (v10.7.0) docs. Looks like the only way to use custom tiles is to upload them to mapbox. Does anyone know this for sure? That would help already.

[rusakovic]

Hello @veb-ioki

Did you try to use mapbox standard tiles?

I think we have the same issue. https://github.com/rnmapbox/maps/issues/2160

[veb-ioki]

Yes we did, but only with the very basic tile set until now (nothing customized) and that worked.

<MapboxGL.MapView
        styleURL={'mapbox://styles/mapbox/light-v10'}
        ...

~Seems that from v10 on, Mapbox enforces you to use their services.~

[Pietro-Putelli]

Hi veb, I'm having the same issue, can you explain how you solve it? And what are tiles and all these stuffs, not mentioned in the documentation. Thank you.

[veb-ioki]

UPDATE I edited this statement :

~Seems that from v10 on, Mapbox enforces you to use their services.~

from my previous comment, because it can't be true. We now saw that with the current state of rnmapbox (#main branch, v10 implementation), sourcing of custom vector tiles in a local style JSON (done as in the description) works on iOS.

This must be an issue on Android only.

~(We will investigate further and update here, but it will take time.)~ Late EDIT: what @SkySails commented => this got fixed 👏

[SkySails]

~I'm seeing the same thing. Did you find the reason @veb-ioki ?~

Nevermind, this seems to be solved in beta 48! 3rd party vector tiles work well on both Android and IOS now.