You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Initiate the project and replace the app.tsx file with the provided app.js file. Additionally, set up rnmapbox in the other folders.
To build the project, execute: npx react-native run-android.
To run the project, use: npm start.
After these steps, you should see the map application on your device. Open the map information and check for user data in the application information, which you have initialized. Then, go to the application and download the offline map. I have specified static latitude and longitude bounds, so you can download the same. Once the map is downloaded, check the application information; the user data should now contain some data. However, if you try to delete the downloaded offline map, you will find that it cannot be deleted, nor can it be reset using the reset function.
Expected behavior
The downloaded offline map should get deleted.
Notes / preliminary analysis
No response
Additional links and references
No response
The text was updated successfully, but these errors were encountered:
Mapbox Implementation
Mapbox
Mapbox Version
default
Platform
Android
@rnmapbox/maps
version10.1.3
Standalone component to reproduce
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, TouchableOpacity, Text, PermissionsAndroid, Platform } from 'react-native';
import MapboxGL from '@rnmapbox/maps';
MapboxGL.setAccessToken('your token here');
const App = () => {
const [downloadProgress, setDownloadProgress] = useState(0);
const [camera, setCamera] = useState({
centerCoordinate: [77.188645, 28.544254],
zoomLevel: 16,
animationDuration: 0,
});
useEffect(() => {
if (Platform.OS === 'android') {
requestAndroidLocationPermission();
}
}, []);
const requestAndroidLocationPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
title: "Location Permission",
message: "This app needs access to your location.",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("Location permission granted");
} else {
console.log("Location permission denied");
}
} catch (err) {
console.warn(err);
}
};
const goToCurrentLocation = async () => {
try {
const location = await MapboxGL.locationManager.getLastKnownLocation();
if (location) {
setCamera({
...camera,
centerCoordinate: [location.coords.longitude, location.coords.latitude],
});
}
} catch (err) {
console.error("Error fetching location:", err);
}
};
const deleteOfflineMap = async () => {
try {
const packs = await MapboxGL.offlineManager.getPacks();
packs.forEach(pack => {
MapboxGL.offlineManager.deletePack(pack.name);
});
} catch (err) {
console.error("Error deleting offline maps:", err);
}
};
const startDownload = async () => {
try {
const region = {
name: 'myRegion',
styleURL: MapboxGL.StyleURL.Street,
bounds: [
[77.182339, 28.551334], // SW coordinates
[77.197160, 28.537156] // NE coordinates
],
minZoom: 10,
maxZoom: 14
};
};
return (
<MapboxGL.MapView style={styles.map} styleURL={MapboxGL.StyleURL.Satellite}>
<MapboxGL.Camera {...camera} />
</MapboxGL.MapView>
Center Map
Delete Offline Map
<TouchableOpacity style={[styles.button, { bottom: 150 }]} onPress={startDownload}>
Download Map
<View style={[styles.progressBar, { width:
${downloadProgress}%
}]} />);
};
export default App;
const styles = StyleSheet.create({
page: {
flex: 1,
},
map: {
flex: 1,
},
button: {
backgroundColor: 'blue',
padding: 10,
borderRadius: 20,
position: 'absolute',
bottom: 20,
right: 20,
},
button2: {
backgroundColor: 'blue',
padding: 10,
borderRadius: 20,
position: 'absolute',
bottom: 80,
right: 20,
},
buttonText: {
color: 'white',
fontSize: 16,
},
progressBarContainer: {
position: 'absolute',
bottom: 0,
left: 20,
right: 20,
height: 10,
backgroundColor: '#e0e0e0',
borderRadius: 10,
},
progressBar: {
height: '100%',
backgroundColor: 'green',
borderRadius: 10,
},
});
Observed behavior and steps to reproduce
Initiate the project and replace the app.tsx file with the provided app.js file. Additionally, set up rnmapbox in the other folders.
To build the project, execute: npx react-native run-android.
To run the project, use: npm start.
After these steps, you should see the map application on your device. Open the map information and check for user data in the application information, which you have initialized. Then, go to the application and download the offline map. I have specified static latitude and longitude bounds, so you can download the same. Once the map is downloaded, check the application information; the user data should now contain some data. However, if you try to delete the downloaded offline map, you will find that it cannot be deleted, nor can it be reset using the reset function.
Expected behavior
The downloaded offline map should get deleted.
Notes / preliminary analysis
No response
Additional links and references
No response
The text was updated successfully, but these errors were encountered: