avatars border

src/screens/InAppScreens/MapScreen/MarkerItem/styles.tsx

@@ -40,7 +40,7 @@ export const styles = StyleSheet.create({
     borderRadius: 19,
     borderWidth: 2,
     borderColor: Colors.TEXT_GRAY,
-    marginTop: Platform.OS === 'ios' ? -34 : -4
+    marginTop: Platform.OS === 'ios' ? -43 : -4
   },
   calloutImage: {
     width: 32,

src/screens/InAppScreens/MapScreen/UserItem/index.tsx

@@ -40,12 +40,21 @@ const UserItem = ({ marker }: { marker: any }) => {
         <MapLibreGL.PointAnnotation
           id={marker.id.toString()}
           coordinate={marker.coordinates}
-          anchor={{ x: 0.5, y: 1 }}
+          anchor={{ x: 0.5, y: 0 }}
         >
           <View style={styles.customView}>
             <View style={styles.calloutContainer}>
-              <View style={[styles.calloutImageContainer, { borderColor: Colors.WHITE }]}>
-                <Image source={marker.avatar} style={styles.userImage} resizeMode="contain" />
+              <View
+                style={[
+                  styles.calloutImageContainer,
+                  { borderColor: Colors.WHITE, width: 54, height: 54, borderRadius: 27 }
+                ]}
+              >
+                <Image
+                  source={marker.avatar}
+                  style={[styles.userImage, { width: 54, height: 54, borderRadius: 27 }]}
+                  resizeMode="contain"
+                />
               </View>
               <View style={styles.calloutTextContainer}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>

src/screens/InAppScreens/MapScreen/index.tsx

@@ -395,7 +395,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         const id = icon.id;
         const img = API_HOST + '/static/img/series_new2/' + icon.new_icon_png;
         const imgVisited = API_HOST + '/static/img/series_new2/' + icon.new_icon_visited_png;
-        if (img && imgVisited) {
+        if (icon.new_icon_png && icon.new_icon_visited_png) {
           loadedSeriesImages[id] = { uri: img };
           loadedSeriesImages[`${id}v`] = { uri: imgVisited };
 
@@ -1369,6 +1369,19 @@ 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}
+              belowLayerID="nomads_symbol"
+              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']]}
@@ -1379,10 +1392,11 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                   'interpolate',
                   ['linear'],
                   ['zoom'],
-                  0, 0.07,
-                  10, 0.12,
-                  15, 0.18,
-                  20, 0.2
+                  0, 0.1,
+                  5, 0.12,
+                  10, 0.14,
+                  15, 0.16,
+                  20, 0.18
                 ],
                 iconAllowOverlap: true
               }}