CODEWITHSUNDEEP
react-nativeexpomapboxmaplibre-gl
SR JOY
SR JOY

Reputation: 31

Mapbox warning setAccessToken requires setWellKnownTileServer for MapLibre Blank Screen - React Native expo

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import MapboxGL from '@rnmapbox/maps';
MapboxGL.setAccessToken('TOKEN');
export default function App() {
  return (
    <View style={styles.page}>
          <MapboxGL.MapView style={styles.map} />
          <StatusBar style="auto"/>
      </View>
  );
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  map: {
    flex: 1
  }
});

Giving this error : Error

Mapbox warning setAccessToken requires setWellKnownTileServer for MapLibre, see setWellKnownTileServer docs for implications Object { "level": "warning", "message": "setAccessToken requires setWellKnownTileServer for MapLibre, see setWellKnownTileServer docs for implications", "tag": "InstanceManagerImpl",

And blank screen: blank react native screen

Upvotes: 3

Views: 2646

Answers (2)

Crdnpyaad
Crdnpyaad

Reputation: 21

I solved it by adding one line to my code:

MapboxGL.setWellKnownTileServer('Mapbox');

Upvotes: 1

Dmitro_
Dmitro_

Reputation: 591

Your map has nothing to show. Add styleJSON or styleURL option. For example (osm tiles):

const defaultStyle = {
  version: 8,
  name: 'Land',
  sources: {
    map: {
      type: 'raster',
      tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
      tileSize: 256,
      minzoom: 1,
      maxzoom: 19,
    },
  },
  layers: [
    {
      id: 'background',
      type: 'background',
      paint: {
        'background-color': '#f2efea',
      },
    },
    {
      id: 'map',
      type: 'raster',
      source: 'map',
      paint: {
        'raster-fade-duration': 100,
      },
    },
  ],
};

// -- map component
<MapboxGL.MapView
  style={styles.map}
  styleJSON={JSON.stringify(defaultStyle)}
/>

Upvotes: 2

Related Questions