cluster icon

src/screens/InAppScreens/MapScreen/index.tsx

@@ -85,6 +85,7 @@ import _ from 'lodash';
 import ScaleBar from 'src/components/ScaleBar';
 import MessagesDot from 'src/components/MessagesDot';
 
+const clusteredUsersIcon = require('assets/icons/icon-clustered-users.png');
 const defaultUserAvatar = require('assets/icon-user-share-location-solid.png');
 const logo = require('assets/logo-ua.png');
 const defaultSeriesIcon = require('assets/series-default.png');
@@ -1388,57 +1389,68 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
             cluster={true}
             clusterRadius={50}
           >
-            <MapLibreRN.CircleLayer
+            <MapLibreRN.SymbolLayer
               id="nomads_circle"
               filter={['has', 'point_count']}
               aboveLayerID={Platform.OS === 'android' ? 'place-continent' : undefined}
               style={{
-                circleRadius: [
+                iconImage: clusteredUsersIcon,
+                iconSize: [
                   'interpolate',
                   ['linear'],
                   ['get', 'point_count'],
                   0,
-                  15,
+                  0.33,
                   10,
-                  17,
+                  0.35,
                   20,
-                  19,
+                  0.37,
                   50,
-                  21,
+                  0.39,
                   75,
-                  23,
+                  0.41,
                   100,
-                  25
+                  0.43
                 ],
-                circleColor: 'rgba(237, 147, 52, 1)',
-                circleStrokeWidth: 2,
-                circleStrokeColor: '#FFFFFF',
-                circleOpacity: 1
+                iconAllowOverlap: true
               }}
-            />
+            ></MapLibreRN.SymbolLayer>
             <MapLibreRN.SymbolLayer
               id="nomads_count"
               filter={['has', 'point_count']}
               aboveLayerID={Platform.OS === 'android' ? 'nomads_circle' : undefined}
               style={{
-                textField: ['get', 'point_count'],
+                textField: [
+                  'case',
+                  ['<', ['get', 'point_count'], 1000],
+                  ['get', 'point_count'],
+                  ['concat', ['/', ['round', ['/', ['get', 'point_count'], 100]], 10], 'k']
+                ],
                 textFont: ['Noto Sans Bold'],
                 textSize: [
                   'interpolate',
                   ['linear'],
                   ['get', 'point_count'],
                   0,
-                  13,
+                  13.5,
                   20,
                   14,
                   75,
                   15
                 ],
                 textColor: '#FFFFFF',
-                textHaloColor: '#000000',
-                textHaloWidth: 1,
                 textAnchor: 'center',
-                textOffset: [0, 0],
+                textOffset: [
+                  'interpolate',
+                  ['linear'],
+                  ['get', 'point_count'],
+                  0,
+                  ['literal', [0, 0.85]],
+                  20,
+                  ['literal', [0, 0.92]],
+                  75,
+                  ['literal', [0, 1]]
+                ],
                 textAllowOverlap: true
               }}
             />