Open frankyveras opened 5 years ago
Hello I'm trying to implement a custom icon for clustering based on point_count property and using interpolation which i believe it's the correct way , but it's not working at all, my starting point is the example of https://github.com/mapbox/react-native-mapbox-gl/blob/master/example/src/components/EarthQuakes.js switching CircleLayer for a SymbolLayer, here's the code
Images Object:
const categoryIconImages = { 'n25': require('../../assets/icons/cluster/cluster_icons_(00-25).png'), 'n50': require('../../assets/icons/cluster/cluster_icons_(25-50).png'), 'n75': require('../../assets/icons/cluster/cluster_icons_(50-75).png'), 'n100': require('../../assets/icons/cluster/cluster_icons_(75-100).png'), 'n300': require('../../assets/icons/cluster/cluster_icons_(100-300).png'), 'n750': require('../../assets/icons/cluster/cluster_icons_(300-750+).png'), };
Style Object:
clusteredPoints: { iconPitchAlignment: 'map', iconImage: Mapbox.StyleSheet.source( [ [25, categoryIconImages.n25], [50, categoryIconImages.n50], [75, categoryIconImages.n75], [100, categoryIconImages.n100], [300, categoryIconImages.n300], [750, categoryIconImages.n750], ], 'point_count', Mapbox.InterpolationMode.Exponential, ), //iconImage: categoryIconImages.n25, iconOpacity: 0.84, iconAllowOverlap: true, iconSize: 0.5, },
Render Function:
renderEventMarkers = (events, categories) => { // console.log("Event List", events) if (events.edges.length > 0) { const featureCollection = this.createFeatureCollection(events); return ( <Mapbox.ShapeSource id="eventShapeSource" shape={featureCollection} images={categoryIconImages} cluster clusterRadius={50} clusterMaxZoom={17} > <Mapbox.SymbolLayer id="pointCount" style={layerStyles.clusterCount} /> <Mapbox.SymbolLayer id="clusteredPoints" belowLayerID="pointCount" filter={['has', 'point_count']} style={layerStyles.clusteredPoints} /> <Mapbox.SymbolLayer id="eventIconName" style={layerStyles.events} filter={['!has', 'point_count']} /> </Mapbox.ShapeSource> ); } else { return null; } };
The error
NOTE: I also tried to reference the image key on the categoryIconImages on the style interpolation but it didn't work : like this
clusteredPoints: { iconPitchAlignment: 'map', iconImage: Mapbox.StyleSheet.source( [ [25, 'n25'], [50, 'n50'], [75, 'n75'], [100, 'n100'], [300, 'n300'], [750, 'n750'], ], 'point_count', Mapbox.InterpolationMode.Exponential, ), //iconImage: categoryIconImages.n25, iconOpacity: 0.84, iconAllowOverlap: true, iconSize: 0.5, },
Thanks in advanced for your help!
Hi @frankyveras were you able to make any progress on this? Looking to implement something similar. Thanks!
It's been fixed in master branch of new repo: https://github.com/react-native-mapbox-gl/maps/issues/140
Hello I'm trying to implement a custom icon for clustering based on point_count property and using interpolation which i believe it's the correct way , but it's not working at all, my starting point is the example of https://github.com/mapbox/react-native-mapbox-gl/blob/master/example/src/components/EarthQuakes.js switching CircleLayer for a SymbolLayer, here's the code
Images Object:
Style Object:
Render Function:
The error
NOTE: I also tried to reference the image key on the categoryIconImages on the style interpolation but it didn't work : like this
Thanks in advanced for your help!