How to perform clustering in React Native Mapbox with custom icons.
i have checked the earthquake clustering example given on GitHub page of mapbox react native. but i need something different like, i need to do clustering with custom icons. i have 2 types of data/points on map one is user and other is events both have different icons so i need to render those custom icons in clustering.
also on tap of that icon i need to show a pulse animation behind that icon. any possible way to do this?
here is my code for implementing mapbox :-
<MapboxGL.MapView
ref={(ref) => this.map = ref}
showUserLocation={store.homeStore.locationAlowed}
zoomLevel={11}
pitch={45}
centerCoordinate={[store.userStore.longitude, store.userStore.latitude]}
userTrackingMode={MapboxGL.UserTrackingModes.follow}
styleURL={MapboxGL.StyleURL.Street}
style={{
position: store.homeStore.mapPosition,
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
logoEnabled={false}
compassEnabled={false}
attributionEnabled={false}
onDidFinishRenderingMapFully={() => this.map.takeSnap(true).then((resp) => {
if (resp) {
store.homeStore.mapImageSource = resp;
}
})}
onPress={this.onMapPress.bind(this)}>
{store.homeStore.setLocationOnMap && store.homeStore.eventData.length > 0 ?
store.homeStore.eventData.map((prop, key) => {
return (
<MapboxGL.PointAnnotation
key={prop.id}
id={prop.id}
coordinate={[parseFloat(prop.evt_longitude), parseFloat(prop.evt_latitude)]} >
<TouchableOpacity onPress={this.selectEventOnMap.bind(this, prop)} style={{ height: vh * 0.109 }}>
<View style={styles.likesContainer}>
<Image source={require('../Images/ic_home_event_likes.png')}
style={[styles.heartImage, prop.event_likes > 999 ? { marginLeft: vw * 0.018 } :
prop.event_likes > 9 ? { marginLeft: vw * 0.036 } : { marginLeft: vw * 0.049 }]} />
<Text style={[styles.likesText, prop.event_likes < 10 ? { marginLeft: 2 } : '']}>
{prop.event_likes > 999 ? (Math.round(prop.event_likes / 1000) + " k") : prop.event_likes}</Text>
</View>
<Image source={require('../Images/ic_home_inactive_event_pin.png')}
style={{
height: vh * 0.098, width: vw * 0.15, marginTop: vh * 0.017,
tintColor: (prop.userid == store.userStore.id ? Colors.Blue : Colors.warmPink)
}} />
<Image source={this.getImageSource(prop.evt_category)}
style={{
height: vh * 0.041, width: vw * 0.077,
top: vh * 0.035, left: vw * 0.038, position: 'absolute'
}} />
{prop.selected && <Pulse style={{ zIndex: -1, position: 'absolute', top: -((vh * 0.109) / 3) }}
color={Colors.warmPink} numPulses={6} diameter={100} speed={18} duration={1000} />}
</TouchableOpacity>
</MapboxGL.PointAnnotation>
);
}) : null}
{store.homeStore.setLocationOnMap && store.homeStore.peopleData.length > 0 ?
store.homeStore.peopleData.map((prop, key) => {
return (
<MapboxGL.PointAnnotation
key={prop.userid}
id={prop.userid}
coordinate={[parseFloat(prop.longitude), parseFloat(prop.latitude)]} >
<TouchableOpacity onPress={() => { store.homeStore.showProfileCard = true; store.homeStore.userData = prop; }}>
<View style={{
height: vw * 0.130, width: vw * 0.130, borderRadius: (vw * 0.130) / 2,
backgroundColor: Colors.Blue, alignItems: 'center', justifyContent: 'center'
}}>
<AsyncImage source={{ uri: prop.image }}
style={{
height: vw * 0.122, width: vw * 0.122, borderRadius: (vw * 0.122) / 2
}} placeholderColor='#b3e5fc' />
</View>
</TouchableOpacity>
</MapboxGL.PointAnnotation>
);
}) : null}
{this.renderRoute()}
{/* <MapboxGL.ShapeSource
id='earthquakes'
cluster
clusterRadius={50}
clusterMaxZoom={14}
url='http://moso.appinventive.com/public/accesscsv/data.json'>
<MapboxGL.SymbolLayer
id='pointCount'
style={layerStyles.clusterCount} />
<MapboxGL.CircleLayer
id='singlePoint'
filter={['!has', 'point_count']}
style={layerStyles.singlePoint} />
</MapboxGL.ShapeSource> */}
{/* <MapboxGL.ShapeSource
id='talesMarkers'
shape={jsonData}
cluster
clusterRadius={50}
clusterMaxZoom={14}
>
<MapboxGL.SymbolLayer key='{id}' id='{id}' style={styles.icon} />
</MapboxGL.ShapeSource> */}
</MapboxGL.MapView>
and here is the json data :-
const jsonData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": "27",
"evt_name": "nh24 event",
"evt_latitude": "28.624134137261",
"evt_longitude": "77.399671500871",
"evt_start": "1520855452",
"evt_category": "1",
"event_address": "Pusta Road, Bahrampur, Noida, Uttar Pradesh 203207, India",
"evt_createdon": "1520855452",
"userid": "23",
"image": "https://appinventiv-development.s3.amazonaws.com/moso%2FnCA3HzIs7OsAVLYVJ6Db",
"event_likes": "0",
"event_followers": "0",
"distance": "2.6069925023499723",
"view": false,
"event_growth": 0,
"owner_popularity": 0,
"viral": 0,
"icon": 'airport-15'
},
"geometry": {
"type": "Point",
"coordinates": [
77.399671500871,
28.624134137261,
6.55
]
},
"id": "27"
},
{
"type": "Feature",
"properties": {
"id": "26",
"evt_name": "event with exact address",
"evt_latitude": "28.611121352303",
"evt_longitude": "77.385811577333",
"evt_start": "1520839916",
"evt_category": "1",
"event_address": "Sector 65, Noida, Uttar Pradesh 201301, India",
"evt_createdon": "1520839916",
"userid": "23",
"image": "https://appinventiv-development.s3.amazonaws.com/moso%2FnCA3HzIs7OsAVLYVJ6Db",
"event_likes": "0",
"event_followers": "0",
"distance": "1.489932977056515",
"view": false,
"event_growth": 0,
"owner_popularity": 0,
"viral": 0,
"icon": 'airport-15'
},
"geometry": {
"type": "Point",
"coordinates": [
77.385811577333,
28.611121352303,
1.67
]
},
"id": "26"
},
{
"type": "Feature",
"properties": {
"userid": "13",
"name": "",
"username": "howdy",
"latitude": 28.577006492753625,
"longitude": 77.32924537095796,
"facebookprof": "",
"instaprof": "",
"image": "https://appinventiv-development.s3.amazonaws.com/moso%2FchMzFARwXj2z1y3MYASk",
"createdon": "1519757532",
"user_bio": "",
"user_likes": "1",
"user_followers": "1",
"distance": "0.021139920338468652",
"liked": false,
"follows": false,
"view": false,
"live_events": "0",
"user_growth": 1.3149888133309905e-9,
"user_popularity": 0.00046882325363338024,
"viral": 1.1720601065666707e-8,
"icon": 'airport-15'
},
"geometry": {
"type": "Point",
"coordinates": [
77.32924537095796,
28.577006492753625,
77.7
]
},
"id": "13"
},
{
"type": "Feature",
"properties": {
"userid": "20",
"name": null,
"username": "otheruser",
"latitude": 28.606038365831,
"longitude": 77.362243836846,
"facebookprof": "",
"instaprof": "",
"image": "https://scontent.xx.fbcdn.net/v/t1.0-1/c59.0.200.200/p200x200/10354686_10150004552801856_220367501106153455_n.jpg?oh=f621f9474a63f5b27b0514adda5db42b&oe=5B0F8625",
"createdon": "1519776475",
"user_bio": "",
"user_likes": "1",
"user_followers": "1",
"distance": "0.019360181909683884",
"liked": false,
"follows": false,
"view": false,
"live_events": "0",
"user_growth": 1.3149888133309905e-9,
"user_popularity": 0.0000017414245723714283,
"viral": 4.35553391414857e-11,
"icon": 'airport-15'
},
"geometry": {
"type": "Point",
"coordinates": [
77.362243836846,
28.606038365831,
1.6
]
},
"id": "20"
},
{
"type": "Feature",
"properties": {
"userid": "23",
"name": "vijay",
"username": "vijaysharma",
"latitude": 28.577006492753625,
"longitude": 77.32924537095796,
"facebookprof": "https://www.gmail.com",
"instaprof": "https://www.gmail.com",
"image": "https://appinventiv-development.s3.amazonaws.com/moso%2FnCA3HzIs7OsAVLYVJ6Db",
"createdon": "1520588433",
"user_bio": "Usheiwhwosbwowgwiwgwowwjai9a7292ue8rgdidbdidhndjdjdjdjsksoa9wub3829283yehs8dyv3i38sieh3i39w83hejwuhe",
"user_likes": "0",
"user_followers": "0",
"distance": "0.021139920338468652",
"liked": false,
"follows": false,
"view": false,
"live_events": "0",
"user_growth": 0,
"user_popularity": 0,
"viral": 0,
"icon": 'airport-15'
},
"geometry": {
"type": "Point",
"coordinates": [
77.32924537095796,
28.577006492753625,
44.5
]
},
"id": "23"
}
]
}
with pointAnnotations i am able to show points on map but this way clustering is not performed on mapbox. and if i try to make points on map from clustering using shapesource layer and json data then i am not getting how to use my custom icons. also i need to fire a click event on tap of that custom pin and show pulse loading animation behind that point.
please take a look at screenshots also what i need to do with clustering. screenshots shown only point annotations with which clustering is not happening.
