maplibre-react-native
maplibre-react-native copied to clipboard
Map tiles not loading - "Request failed due to a permanent error: Canceled"
Describe and reproduce the Bug
Environment
- MapLibre React Native: v10
- Expo SDK: 53
- Platform: Android (physical device & emulator)
- Testing on: Mobile data & WiFi
Problem
Map component loads successfully but tiles fail to download with "Canceled" error.
What Works
- Demo tiles load:
https://demotiles.maplibre.org/style.json - Map renders, user location shows
- onDidFinishLoadingMap callback fires successfully
What Doesn't Work
- OpenFreeMap tiles don't load
- MapTiler tiles don't load
- All show same "Canceled" error in console
Console Output
LOG MapLibre [info] Request failed due to a permanent error: Canceled {"level": "warning", "message": "Request failed due to a permanent error: Canceled ", "tag": "Mbgl-HttpRequest"} LOG ✅ MAP LOADED SUCCESSFULLY LOG MapLibre [info] Request failed due to a permanent error: Canceled {"level": "warning", "message": "Request failed due to a permanent error: Canceled ", "tag": "Mbgl-HttpRequest"}
<MapLibreGL.MapView ref={mapRef} style={styles.map} styleURL={MAP_STYLE_URL} onDidFinishLoadingMap={() => { console.log('✅ MAP LOADED SUCCESSFULLY'); }} onDidFailLoadingMap={(error) => { console.log('❌ MAP FAILED:', error); }} > <MapLibreGL.Camera ref={cameraRef} centerCoordinate={[ location?.longitude || defaultLocation.longitude, location?.latitude || defaultLocation.latitude ]} zoomLevel={14} animationDuration={1000} />
<MapLibreGL.UserLocation
visible={true}
showsUserHeadingIndicator={true}
/>
{/* Map markers for activities */}
{activities
.filter(act => selectedCategories.includes(act.category))
.filter(act => !hideCompleted || !isActivityCompleted(act.id))
.filter(act => {
if (!location) return true;
const distance = calculateDistance(
location.latitude,
location.longitude,
act.startPoint.latitude,
act.startPoint.longitude
);
return distance <= 25000;
})
.map(act => (
<ActivityMarker
key={act.id}
id={act.id}
coordinate={act.startPoint}
title={act.title}
category={act.category}
activity={act.activityType}
isCompleted={isActivityCompleted(act.id)}
onPress={handleActivitySelect}
/>
))}
</MapLibreGL.MapView>
Question
Why do demo tiles work but other tile sources get canceled? Is this a known issue with certain tile providers?
@maplibre/maplibre-react-native Version
@maplibre/maplibre-react-native": "^10.2.1"
Which platforms does this occur on?
Android Emulator
Which frameworks does this occur on?
React Native
Which architectures does this occur on?
New Architecture
Environment
expo-env-info 2.0.7 environment info:
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.20.7 - C:\Program Files\nodejs\node.EXE
npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
SDKs:
Android SDK:
API Levels: 34, 35, 36
Build Tools: 34.0.0, 35.0.0, 35.0.1, 36.0.0
System Images: android-30 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86_64 Atom, android-36 | Google Play Intel x86_64 Atom
IDEs:
Android Studio: AI-251.26094.121.2513.14007798
npmPackages:
expo: ~53.0.23 => 53.0.23
expo-router: ~5.1.7 => 5.1.7
react: 19.0.0 => 19.0.0
react-dom: 19.0.0 => 19.0.0
react-native: 0.79.5 => 0.79.5
react-native-web: ~0.20.0 => 0.20.0
Expo Workflow: bare