androidreact-nativemapboxmapbox-glreact-native-mapbox-gl

black (night mode) tiles appearing in high zoom levels of custom rastersource react-native-mapbox-gl


I have developed my own maptile server and I want to use it as my raster source in react-native-mapbox-gl this is my code:

const rasterSourceProps = { id: 'iranMap', tileUrlTemplates: ['http://.../{z}/{x}/{y}.png'], tileSize: 256,

};

<MapboxGL.MapView   
        style={styles.map} 
        rotateEnabled>

          <MapboxGL.RasterSource {...rasterSourceProps} >
                <MapboxGL.BackgroundLayer id="background"  sourceLayerID="iranMap" style={{ backgroundColor:"#f2efea"} } />
                <MapboxGL.RasterLayer
                    id="iranMapLayer"
                    sourceLayerID="iranMap"
                    minZoomLevel= {1}
                    maxZoomLevel= {19}   
                    style={{rasterOpacity: 1, rasterFadeDuration: 100}}               
                />           
          </MapboxGL.RasterSource>
          <MapboxGL.Camera zoomLevel={3} centerCoordinate={coordinates} />
          <MapboxGL.PointAnnotation coordinate={coordinates} id="Test" />        
        </MapboxGL.MapView>

I can view my map with my own tiles, but the problem is that in high zoom levels, some tiles are loaded in night mode as the picture below:

https://drive.google.com/file/d/1O_OQdMI-7SKCC3E5HSnuR_vwOzwseVOY/view?usp=sharing

any solutions?


Solution

  • You just need to develop the app in release version and view the map in real device! For me the problem is solved