series fix

src/screens/InAppScreens/MapScreen/index.tsx

@@ -75,6 +75,7 @@ import UserItem from './UserItem';
 
 const defaultUserAvatar = require('assets/icon-user-share-location-solid.png');
 const logo = require('assets/logo-ua.png');
+const defaultSeriesIcon = require('assets/series-default.png');
 
 MapLibreGL.setAccessToken(null);
 MapLibreGL.Logger.setLogLevel('error');
@@ -369,6 +370,8 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
   );
   const [selectedUser, setSelectedUser] = useState<any>(null);
 
+  const processedImages = useRef(new Set<string>());
+
   useEffect(() => {
     if (!showNomads) {
       setNomads(null);
@@ -397,11 +400,20 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         const prefetchUrls: string[] = [];
   
         const promises = seriesIcons.data.map(async (icon) => {
-          const id = icon.id;
+          const id = icon.id?.toString();
           const img = `${API_HOST}/static/img/series_new2_small/${icon.new_icon_png}`;
           const imgVisited = `${API_HOST}/static/img/series_new2_small/${icon.new_icon_visited_png}`;
 
-          if (icon.new_icon_png && icon.new_icon_visited_png && !images[id] && !images[`${id}v`]) {
+          if (
+            icon.new_icon_png &&
+            icon.new_icon_visited_png &&
+            !processedImages.current.has(id) &&
+            !processedImages.current.has(`${id}v`)
+          ) {
+
+            processedImages.current.add(id);
+            processedImages.current.add(`${id}v`);
+
             loadedSeriesImages[id] = { uri: img };
             loadedSeriesImages[`${id}v`] = { uri: imgVisited };
 
@@ -415,11 +427,11 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
 
         await Promise.all(promises);
 
+        setImages((prevImages: any) => ({ ...prevImages, ...loadedSeriesImages }));
+
         if (prefetchUrls.length > 0) {
           ExpoImage.prefetch(prefetchUrls);
         }
-
-        setImages((prevImages: any) => ({ ...prevImages, ...loadedSeriesImages }));
       };
   
       loadImages();
@@ -1104,7 +1116,17 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         onPress={onMapPress}
         onRegionDidChange={handleRegionDidChange}
       >
-        <MapLibreGL.Images images={images}>
+        <MapLibreGL.Images images={images} onImageMissing={(image) => {
+          if (processedImages.current.has(image)) {
+            return;
+          }
+      
+          processedImages.current.add(image);
+          setImages((prevImages: any) => ({
+            ...prevImages,
+            [image]: defaultSeriesIcon,
+          }));
+        }}>
           <View />
         </MapLibreGL.Images>
 
@@ -1217,7 +1239,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           tileUrlTemplates={[VECTOR_MAP_HOST + '/tiles/series/{z}/{x}/{y}.pbf']}
           onPress={handleMarkerPress}
         >
-          {seriesFilter.status !== 1 ? (
+          {seriesFilter.status !== 1 && Object.keys(images).length > 0 ? (
             <MapLibreGL.SymbolLayer
               id={series_layer.id}
               sourceID={series_layer.source}
@@ -1244,7 +1266,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
             <></>
           )}
 
-          {seriesFilter.status !== 0 ? (
+          {seriesFilter.status !== 0 && Object.keys(images).length > 0 ? (
             <MapLibreGL.SymbolLayer
               id={series_visited.id}
               sourceID={series_visited.source}