Implement clustering features with custom JSX marker

[hhgandhi]

Hello ,

I hope this message finds you well.

I am currently working on implementing clustering in my mobile application and have referenced a page to achieve my desired result. https://github.com/rnmapbox/maps/blob/main/example/src/examples/SymbolCircleLayer/Earthquakes.tsx

However, I am now seeking guidance on how to customize the default marker view to fit my specific requirements. I aim to add my custom JSX marker view using Mapbox.PointAnnotation and would appreciate expert advice on how to do so.

Thank you in advance.

import React, { useState, useEffect } from 'react'
import Mapbox, { ShapeSource, CircleLayer, CircleLayerStyle, SymbolLayer, SymbolLayerStyle, PointAnnotation, Callout } from '@rnmapbox/maps';

return (
        <ShapeSource id="clustering"
            onPress={}
            ref={shapeSource}
            cluster
            clusterRadius={50}
            clusterMaxZoomLevel={17}
            shape={clusterRecord}
        >
            <SymbolLayer id="pointCount" style={layerStyles.clusterCount} />
            <CircleLayer
                id="clusteredPoints"
                belowLayerID="pointCount"
                filter={['has', 'point_count']}
                style={layerStyles.clusteredPoints}
            />

            
            {/* <CircleLayer   // This is the default one, and I successfully achieved this
                id="singlePoint"
                filter={['!', ['has', 'point_count']]}
                style={layerStyles.singlePoint}
            /> */}

              // This is the requirements- add custom marker, and I am not able to achieve 
              <PointAnnotation
                    id={'id'}
                    coordinate={{Here how can I pass actual marker's coordinate ? }}
                >
                           <View style={styles.priceView}>
                                <View style={pointerColor(marker.propertyTypes[0])} />
                                <View style={priceTagColor(marker.propertyTypes[0])} >
                                    <Text style={styles.priceText}>${marker.priceFrom}</Text>
                                </View>
                            </View>
               </PointAnnotation>
        </ShapeSource>
    )

[mfazekas]

@hhgandhi you cannot place a marker view/ point annotation inside a shapeSource. Only SymbolLayer or CircleLayer.

[hhgandhi]

Thanks, @mfazekas for a quick reply,

I understand that only SymbolLayer or CircleLayer can be rendered inside shapeSource. However, I have a specific requirement that I need help and guidance with. Can you assist me with this?

All I need is assistance in swapping out the default CircleLayer marker with a customized one that incorporates JSX.