Subject: Images from POI objects not loading - 404 errors with Content-Type: application/xml
Environment
-
Mappedin React Native SDK: v6.0.0-alpha.13
-
React Native: 0.73.6
-
Platform: iOS/Android
-
Map ID: 6874eba5f9567d000ba1a81f
Problem Description
We’re trying to display images from POI (Points of Interest) objects in our React Native app using Mappedin SDK. The images are stored in the images array of POI objects, with URLs pointing to cdn.mappedin.com.
Current Implementation
We’re extracting image URLs from POI objects like this:
// From POI object structure
const poi = {
id: "s_a480f6445b665f32",
name: "Paisagem Pastoral",
images: [
{
__type: "image",
id: "some_id",
url: "https://cdn.mappedin.com/6874eba5f9567d000ba1a81f/7d1738f87c22b10ad6a5aa4277c6c333013035c0.webp"
}
]
};
// We then use these URLs in React Native Image component
<Image source={{ uri: poi.images[0].url }} />
Expected Behavior
-
Images should load and display correctly in React Native Image components
-
URLs should return actual image data with proper Content-Type (image/webp, image/jpeg, etc.)
Actual Behavior
-
404 errors when trying to load images
-
Server returns Content-Type: application/xml instead of image data
-
Images fail to load in React Native Image components
-
URLs appear to be valid but are not accessible
Error Details
LOG 
RNImage load error: cdn.mappedin .com/6874eba5f9567d000ba1a81f/7d1738f87c22b10ad6a5aa4277c6c333013035c0.webp
LOG Gallery image load error: {“error”: “Failed to load https ://cdn.mappedin.com/…”, “responseCode”: 404, “httpResponseHeaders”: {“Content-Type”: “application/xml”}}
Questions for Developers
-
Are these CDN URLs supposed to work directly? Or do they require special authentication/SAS tokens?
-
Is there a specific method in the SDK to get authenticated image URLs? We’ve tried:
-
mapData.getById(poiId)
-
mapData.Query.find()
-
mapData.Search.search()
-
Various methods with includeSasTokens, authenticated, signed parameters
- Should we be using a different approach? Like:
-
mapView.Images.add(target, url, options) (which works but adds images to the map, not displays them in UI)
-
Special image loading methods we might have missed
- Are there any configuration requirements for accessing CDN images that we might have missed?
Additional Context
-
The Mappedin SDK API itself works fine (we can add images to the map using mapView.Images.add())
-
POI data is being retrieved correctly
-
The issue is specifically with displaying images in React Native UI components
-
We’re using the exact URL structure that comes from the POI objects
Code Source
This implementation is based on:
-
Mappedin React Native SDK documentation
-
Standard React Native Image component usage
-
POI object structure from mapData.getByType(‘point-of-interest’)
Please let us know if we’re missing something obvious or if there’s a different approach we should be using to display POI images in our app.
