Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to change cluster border? #247

Open
stephanbluegrass opened this issue Nov 14, 2022 · 3 comments
Open

How to change cluster border? #247

stephanbluegrass opened this issue Nov 14, 2022 · 3 comments

Comments

@stephanbluegrass
Copy link

Good day
I have found repos from older versions documenting clusterBorderWidth and clusterBorderColor as props to MapView. It doesn't seem to work anymore? Also cant find any documentation or solution after 2018/2019 posts.

Any help would be appreciated. I'd ultimately like to remove the borders all together.

@AlixH
Copy link

AlixH commented Nov 18, 2022

Use the renderCluster prop of MapView to render custom clusters

@lucksp
Copy link

lucksp commented Jan 11, 2023

Is there any documentation on what renderCluster returns and what this library needs to render a custom cluster?

@stephanbluegrass
Copy link
Author

stephanbluegrass commented Jan 19, 2023

Is there any documentation on what renderCluster returns and what this library needs to render a custom cluster?

@lucksp this worked for me >>
<MapView style={styles.map} customMapStyle={mapStyle} minPoints={10} minZoom={1} renderCluster={(cluster) => { const { id, geometry, onPress, properties } = cluster; const points = properties.point_count; return ( <Marker key={cluster-${id}} coordinate={{ longitude: geometry.coordinates[0], latitude: geometry.coordinates[1], }} onPress={onPress} > <View style={{ width: 50, height: 50, backgroundColor: ASTRON_ORANGE, borderRadius: 50, justifyContent: "center", }} > <Text style={{ color: WHITE, textAlign: "center", fontFamily: "avenirnext", }} > {points} </Text> </View> </Marker> ); }} radius={70} showsUserLocation={showUserLocation} showsMyLocationButton={false} region={this.region} loadingEnabled onUserLocationChange={(event) => userLocationChanged(event)} onRegionChange={regionChanged} followUserLocation={followUserLocation} ref={mapRef} onMoveShouldSetResponder={() => { setFollowUserLocation(false); }} key="mapa" >

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants