Browse Source

defaul user icon on the map

Viktoriia 7 months ago
parent
commit
e42ac47cc3

BIN
assets/icon-user-share-location-solid.png


BIN
assets/icon-user-share-location.png


+ 12 - 59
src/screens/InAppScreens/MapScreen/index.tsx

@@ -73,6 +73,9 @@ import {
 } from '@api/location';
 import UserItem from './UserItem';
 
+const defaultUserAvatar = require('assets/icon-user-share-location-solid.png');
+const logo = require('assets/logo-ua.png');
+
 MapLibreGL.setAccessToken(null);
 MapLibreGL.Logger.setLogLevel('error');
 
@@ -423,44 +426,6 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
     }
   }, [seriesIcons]);
 
-  useEffect(() => {
-    if (nomads && nomads.features) {
-      const loadImages = async () => {
-        let loadedNomadsImages: any = {};
-        loadedNomadsImages['default_icon'] = require('assets/logo-ua.png');
-
-        const promises = nomads.features.map(async (feature) => {
-          const user_id = feature.properties?.avatar
-            ? `user_${feature.properties?.id}`
-            : 'default_icon';
-          const avatarPath = feature.properties?.avatar;
-          const avatarUrl = { uri: `${API_HOST}${avatarPath}`, cache: 'force-cache' };
-
-          if (feature.properties) {
-            feature.properties.icon_key = user_id;
-          }
-
-          if (avatarPath && !images[user_id]) {
-            const cachedUrls = await ExpoImage.getCachePathAsync(avatarUrl.uri);
-            if (!cachedUrls) {
-              ExpoImage.prefetch([`${API_HOST}${avatarPath}`]);
-            }
-
-            return (loadedNomadsImages[user_id] = avatarUrl);
-          } else {
-            return Promise.resolve();
-          }
-        });
-
-        await Promise.all(promises);
-
-        setImages((prevImages: any) => ({ ...prevImages, ...loadedNomadsImages }));
-      };
-
-      loadImages();
-    }
-  }, [nomads]);
-
   useEffect(() => {
     const loadDatabases = async () => {
       const firstDb = await getFirstDatabase();
@@ -1115,7 +1080,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
     if (selectedFeature) {
       setSelectedUser({
         coordinates,
-        avatar: avatar ? { uri: API_HOST + avatar } : require('assets/logo-ua.png'),
+        avatar: avatar ? { uri: API_HOST + avatar } : logo,
         first_name,
         last_name,
         flag: { uri: API_HOST + flag },
@@ -1355,7 +1320,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                   75, 23,
                   100, 25
                 ],
-                circleColor: 'rgba(255, 126, 0, 1)',
+                circleColor: 'rgba(237, 147, 52, 1)',
                 circleStrokeWidth: 2,
                 circleStrokeColor: '#FFFFFF',
                 circleOpacity: 1
@@ -1384,33 +1349,21 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                 textAllowOverlap: true
               }}
             />
-            <MapLibreGL.CircleLayer
-              id="nomads_circle_outline"
-              filter={['!', ['has', 'point_count']]}
-              aboveLayerID={Platform.OS === 'android' ? 'place-continent' : undefined}
-              style={{
-                circleRadius: ['interpolate', ['linear'], ['zoom'], 0, 15, 5, 18, 10, 21, 15, 24, 20, 27],
-                circleColor: 'rgba(255, 126, 0, 1)',
-                circleStrokeWidth: 2,
-                circleStrokeColor: '#FFFFFF',
-                circleOpacity: 1
-              }}
-            />
             <MapLibreGL.SymbolLayer
               id="nomads_symbol"
               filter={['!', ['has', 'point_count']]}
-              aboveLayerID="nomads_circle_outline"
+              aboveLayerID={Platform.OS === 'android' ? 'place-continent' : undefined}
               style={{
-                iconImage: ['get', 'icon_key'],
+                iconImage: defaultUserAvatar,
                 iconSize: [
                   'interpolate',
                   ['linear'],
                   ['zoom'],
-                  0, 0.1,
-                  5, 0.12,
-                  10, 0.14,
-                  15, 0.16,
-                  20, 0.18
+                  0, 0.24,
+                  5, 0.28,
+                  10, 0.33,
+                  15, 0.38,
+                  20, 0.42
                 ],
                 iconAllowOverlap: true
               }}