Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: #3295

Closed
vishaldybot opened this issue Dec 31, 2023 · 2 comments
Closed

[Bug]: #3295

vishaldybot opened this issue Dec 31, 2023 · 2 comments
Labels
bug 🪲 Something isn't working reopen-on-code-fixed

Comments

@vishaldybot
Copy link

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

Android

@rnmapbox/maps version

10.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
};

  await MapboxGL.offlineManager.createPack(
    region,
    (offlineRegion, downloadStatus) => {
      setDownloadProgress(downloadStatus.percentage);
    }
  );
} catch (err) {
  console.error("Error downloading map:", err);
}

};

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

@vishaldybot vishaldybot added the bug 🪲 Something isn't working label Dec 31, 2023
Copy link

No code example found in issue body - More info

@vishaldybot
Copy link
Author

I have pasted the code base

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🪲 Something isn't working reopen-on-code-fixed
Projects
None yet
Development

No branches or pull requests

1 participant