React Native MapboxGL - How to display offline pack on mapview?

964 Views Asked by At

I'm working on a project that allows users to use the map offline.

Here's my code to download the offline pack.

    const downloadRoute = async () => {
        try{
            await MapboxGL.offlineManager.createPack({
                name: 'LionRock',
                styleURL: "mapbox://styles/mapbox/streets-v11",
                minZoom: 14,
                maxZoom: 20,
                bounds: [[114.168637,22.370876], [114.220005, 22.332990]]
              }, 
              (offlinePack, status) => console.log(offlinePack, status),
              (offlinePack, err) => console.log(offlinePack, err),
              )
              console.log("Downloading")
        }catch(err){
            console.log(err)
        }
    }

And it returns success.

{"_metadata": null, "pack": {"bounds": [[Array], [Array]], "metadata": "{\"name\":\"LionRock\"}"}} {"completedResourceCount": 667, "completedResourceSize": 10960511, "completedTileCount": 141, "completedTileSize": 4011727, "name": "LionRock", "percentage": 100, "requiredResourceCount": 667, "state": 2}

Then, I tried to get my offline packs back and make use in MapView

export default function LocalRoutesScreen() {

    useEffect( ()=>{getRoutes()} , [])
    const [routes, setRoutes] = useState(null)

    const getRoutes = async() => {
        try{
            const offlinePacks = await MapboxGL.offlineManager.getPacks();
            setRoutes(offlinePacks)
        }catch(err){
            console.log(err)
        }
    }
    
    if(routes == null){return(<View><Text>Getting your map ready!</Text></View>)}
    console.log(routes)

    return(
        <View style={styles.page}>
            <MapboxGL.MapView style={styles.map} offlinePacks={routes} >
                <MapboxGL.Camera zoomLevel={14} centerCoordinate={[114.168637, 22.370876]}/>
            </MapboxGL.MapView>
        </View>
    )
}

When I run the app and cut off the internet access, Mapbox returns nothing. Image of result

How can I fix it? Thanks.

0

There are 0 best solutions below