Reputation: 31
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.
Upvotes: 3
Views: 1090