0
<UrlTile
urlTemplate={'https://api.maptiler.com/maps/topographique/256/{z}/{x}/{y}@2x.png?key=nQEdJcXZH5PRPm3AKJtX'}/>

This is how I setup urlTile in <MapView> from react-native-maps module.

Somehow the loaded map is a mess, no matter how long I wait. Does any know what happened by any chance?

This is reproducible in both ios simulator and an ios device, by simply the following step, using expo:

  1. expo init a blank project
  2. yarn add react-native-maps
  3. Put the following code in the top level view, with basic styles to make it full screen.
  4. There you go.
  <MapView style={styles.mapStyle}>
    <UrlTile
      urlTemplate={'https://api.maptiler.com/maps/topographique/256/{z}/{x}/{y}@2x.png?key=nQEdJcXZH5PRPm3AKJtX'}
    />
  </MapView>

enter image description here

jack2684
  • 324
  • 3
  • 15

1 Answers1

0

I had a similar issue when using high-resolution (512px) tiles. Although it looks like you're accessing the 256px tiles from the URL, you also access the @2x resolution, which is usually 512px. Maybe double-check you have got the resolution correct.

  <UrlTile
      urlTemplate={this.urlTemplate}
      tileSize={512}
  />
Lachlan Russell
  • 1