|
|
@@ -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
|
|
|
}}
|
|
|
/>
|
