Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding custom map tiles - Openmaptiles #1705

Closed
miihauu opened this issue Mar 9, 2021 · 0 comments
Closed

Adding custom map tiles - Openmaptiles #1705

miihauu opened this issue Mar 9, 2021 · 0 comments

Comments

@miihauu
Copy link

miihauu commented Mar 9, 2021

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 when I put my JSON on React Web application it runs perfectly.
However, on android and iOS, I just get the blank screen. It looks like this:

image

My example component:

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

Part of my style.json file, but it 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"
}

Anyone has some similar problems? Without external style.json it works perfect. I have tried it with generated public access token and without it. The problem is still appearing.

@miihauu miihauu closed this as completed Mar 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant