maplibre-react-native icon indicating copy to clipboard operation
maplibre-react-native copied to clipboard

Map tiles not loading - "Request failed due to a permanent error: Canceled"

Open giancarlo84 opened this issue 2 months ago • 1 comments

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

giancarlo84 avatar Oct 02 '25 19:10 giancarlo84