React-native-mapbox-gl: Use different TileServer

[Stophface]

Is it possible to use a different TileServer than the one provided by MapBox?
We have our own TileServer and I like to use that one instead of taking the detour over MapBox

[RobertSasak]

I assume that you have an url to your tiles server such as https://a.mytileserver.com/tiles/{z}/{x}/{y} . You may be very tempted to use it directly. Instead you need to create a json with tile specification and then as a styleURL you need to provide url to style specification.

<MapView styleURL="https://mymap.com/v4/map.json" ... >

Here is an example of minimal style specification of map.json . More information can be found here.
https://www.mapbox.com/mapbox-gl-js/style-spec/

{
  "version": 8,
  "name": "Land",
  "sources": {
    "map": {
      "type": "raster",
      "tiles": [
        "https://a.mytileserver.com/tiles/{z}/{x}/{y}",
        "https://b.mytileserver.com/tiles/{z}/{x}/{y}",
        "https://c.mytileserver.com/tiles/{z}/{x}/{y}"
      ],
      "bounds": [
        5.322054,
        60.391263,
        6.465313,
        60.658534
      ],
      "tileSize": 256,
      "minzoom": 1,
      "maxzoom": 18
    }
  },
  "layers": [
       {
      "id": "map",
      "type": "raster",
      "source": "map",
      "paint": {
        "raster-fade-duration": 100
      }
    }
  ]
}

[Stophface]

@RobertSasak thanks!

[nitaliano]

@Stophface Now with our v6 rewrite there is a RasterSource where you can add custom tiles to the map, there is an example of this in the demo application on the v6 branch

[gino8080]

so it is possible to use entirely a custom tile source ?
without paying for Mapbox PAY-AS-YOU-GO tiles services?

[RobertSasak]

Yes.

[WrathChaos]

@RobertSasak I want to use RN Mapbox GL/Maps with a custom tile source and without paying for Mapbox's pay as you go tile services. However, I could not make it work without the Access Token. Can you help me with that?

[RobertSasak]

I tried to use it without Access token but was not able to. So I provided an access token. However I am not charged as there is no traffic.

[WrathChaos]

@RobertSasak Can you provide me with an example of how to do that? I have to make sure that Mapbox will not charge of us.

[RobertSasak]

<MapboxGL.MapView style="map" styleURL="https://tileserber.bla/style.json"}>

style.json

{
  "version": 8,
  "name": "Land",
  "sources": {
    "map": {
      "type": "raster",
      "tiles": ["https://tileserver.bla/{z}/{x}/{y}.png"],
      "tileSize": 256,
      "minzoom": 1,
      "maxzoom": 18
    },
  },
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "#f2efea"
      }
    },
    {
      "id": "map",
      "type": "raster",
      "source": "map",
      "paint": {
        "raster-fade-duration": 100
      }
    }
  ]
}

[kylebarron]

With the same setup as the previous comment, I have custom tiles working (at least in the emulator), without setting the Mapbox API token.