Adding custom map tiles - Openmaptiles

Describe the bug
Hi all,

If anyone could help I’d be grateful. I have tried to configure custom map tiles by using openmaptiles. I get my style.json from the external server and gets only blank screen.

To Reproduce
My example component:

import React from "react"
import { observer } from "mobx-react-lite"
import { StyleSheet, View, ViewStyle, Text, TextStyle } from "react-native"
import { Screen } from "../../components"
import MapboxGL from "@react-native-mapbox-gl/maps"

MapboxGL.setAccessToken('myToken')

const ROOT: ViewStyle = {
  backgroundColor: color.palette.white,
  flex: 1,
  justifyContent: 'flex-start',
  alignItems: 'center',
}

export const MapBoxScreen = observer(function MapBoxScreen(props) {
  return (
    <Screen style={ROOT}>
        <MapboxGL.MapView
          styleURL={'https://myURL.com/style.json'}
        >
        </MapboxGL.MapView>
    </Screen>
  )
})

Part of my style.json file, but it is the same as an example from: https://github.com/openmaptiles/osm-bright-gl-style/blob/master/style.json

{
  "version": 8,
  "name": "Bright",
  "metadata": {
    "mapbox:autocomposite": false,
    "mapbox:groups": {
      "1444849242106.713": {"collapsed": false, "name": "Places"},
      "1444849334699.1902": {"collapsed": true, "name": "Bridges"},
      "1444849345966.4436": {"collapsed": false, "name": "Roads"},
      "1444849354174.1904": {"collapsed": true, "name": "Tunnels"},
      "1444849364238.8171": {"collapsed": false, "name": "Buildings"},
      "1444849382550.77": {"collapsed": false, "name": "Water"},
      "1444849388993.3071": {"collapsed": false, "name": "Land"}
    },
    "mapbox:type": "template",
    "openmaptiles:mapbox:owner": "openmaptiles",
    "openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t",
    "openmaptiles:version": "3.x"
  },
  "center": [0, 0],
  "zoom": 1,
  "bearing": 0,
  "pitch": 0,
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://myURL/spec.json?{key}"
    }
  },
  "sprite": "https://openmaptiles.github.io/osm-bright-gl-style/sprite",
  "glyphs": "https://myURL.com/fonts/{fontstack}/{range}.pbf?{key}",
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {"background-color": "#f8f4f0"}
    },
    {
      "id": "landcover-glacier",
      "type": "fill",
      "metadata": {"mapbox:group": "1444849388993.3071"},
      "source": "openmaptiles",
      "source-layer": "landcover",
      "filter": ["==", "subclass", "glacier"],
      "layout": {"visibility": "visible"},
      "paint": {
        "fill-color": "#fff",
        "fill-opacity": {"base": 1, "stops": [[0, 0.9], [10, 0.3]]}
      }
    },
    {
      "id": "landuse-residential",
      "type": "fill",
      "metadata": {"mapbox:group": "1444849388993.3071"},
      "source": "openmaptiles",
      "source-layer": "landuse",
      "filter": [
        "all",
        ["in", "class", "residential", "suburb", "neighbourhood"]
      ],
      "layout": {"visibility": "visible"},
      "paint": {
        "fill-color": {
          "base": 1,
          "stops": [
            [12, "hsla(30, 19%, 90%, 0.4)"],
            [16, "hsla(30, 19%, 90%, 0.2)"]
          ]
        }
      }
    },
  ],
  "id": "bright"
}

Expected behavior
Maps should be visible on mobile platforms.

Actual behavior
On android and iOS, I just get the blank screen.

Screenshots
The same on Android

Versions:

• Platform: Android, iOS
• Platform OS: iOS14, Android 10
• Device: OnePlus 5, iPhone 11 Pro and simulators
• Emulator/ Simulator: Yes
• Dev OS: MacOS Big Sur
• react-native-mapbox-gl Version 8.1.0
• React Native Version 0.63.4

Additional context
JSON works perfect on React Web with library react-mapbox-gl

[miihauu]

@ferdicus Thank you for your support. I have checked it and you are right. Everything is ok, because I reproduced your instructions and it works! I found that is an issue with my JSON, so that is the case that it doesn’t work.

[ferdicus]

Works fine for me (current master within the example demo app):

I’ve used the style.json you linked to, created a free account and replaced instances of key with my apiKey.

Before that, I got an 403 error (curious, that you didn’t get any error when trying it on your end 🤔 )

Steps to reproduce:

• go within the example directory
• create this file example/src/assets/style.json
• its content should be this: https://raw.githubusercontent.com/openmaptiles/osm-bright-gl-style/master/style.json
• replace the two {key} instances within style.json with your api key: https://cloud.maptiler.com/account/keys/
• use this example within the example app: example/src/examples/Map/ShowMapLocalStyle.tsx
• replace const style = JSON.stringify(require('../../assets/map-styleURL-style.json')); with const style = JSON.stringify(require('../../assets/style.json'));
• when you open the example app navigate to Map => Show Map With Local Style JSON

Notice, I’ve used local style.json, however this should also just work fine with linking styleURL to a url that serves the style.json.