Implement clustering properties to ShapeSource

[ivari]

Description

Years ago, Mapbox implemented clusterProperties attribute for ShapeSource, which enables declaring custom aggregated properties for clustered features on the map.

Android: mapbox/mapbox-gl-native#15425
iOS: mapbox/mapbox-gl-native#15515

I wanted to see this implemented, as we have a use case in our app where we want to open a new view on cluster tap, which shows information for all features clustered under the icon. Additionally, we want to show information on the icon which is more complex than simple {point_count}.

So, finally, we got around to implementing it. Here's the PR.

The fork is already running in production for our apps as well.

Relevant feature request: #693

Checklist

• I have tested this on a device/simulator for each compatible OS
• I formatted JS and TS files with running yarn lint:fix in the root folder
• I updated the documentation with running yarn generate in the root folder
• I mentioned this change in CHANGELOG.md
• I updated the typings files (index.d.ts)
• I added/ updated a sample (/example)

Screenshot OR Video

See the video from our implementation in our B2B app.
https://user-images.githubusercontent.com/5424427/154564667-1ea37d1e-e9e7-4377-9faf-c5c6090c7530.mov

[mfazekas]

👍 Thanks very much, looks great, to me. Can you update with current main?!

[ivari]

👍 Thanks very much, looks great, to me. Can you update with current main?!

Thank you! Rebased to latest main.

[tiagotwistag]

Hey, any clue when we can get this merged in?

[mfazekas]

@ivari I'm sorry can you rebase again?! Also can you extend a note in README that it was implemented on maplibre/mapbox-gl

[naftalibeder]

@ivari If you don’t mind doing the couple of things @mfazekas mentioned, we can merge this right away. Thanks!

[ivari]

@mfazekas, @naftalibeder, my apologies, was on sick leave for a week. Done as you requested, now.

[naftalibeder]

Thanks @ivari!

[woodybury]

@ivari amazing thanks for this!

Do you mind sharing a basic example of usage. Im unable to get it to work. Here's what I got:

<ShapeSource
  id="source"
  hitbox={symbolHitbox}
  shape={featureCollection}
  cluster={true}
  clusterMaxZoom={14}
  clusterRadius={50}
  clusterProperties= {{
	  "sum": ["+", ["get", "count"]] // count is a features.properties key on faetureCollection geojson. value is type int
  }}
  >
  <SymbolLayer
	  id="avatarPoints"
	  style={symbolStyle}
	  filter={['!', ['has', 'point_count']]}
  />
  <SymbolLayer
	  id="pointCount"
	  style={pointCountStyle}
  />
  <CircleLayer
	  id="clusteredSymbol"
	  belowLayerID="pointCount"
	  filter={['has', 'point_count']}
	  style={clusterSymbolStyle}
  />
</ShapeSource>

and pointCountStyle:

const pointCountStyle = {
	textField: '{point_count}-{sum}', // sum is does not exist here
	textSize: 12,
	textColor: 'white',
	textPitchAlignment: 'map'
};

[ivari]

@WoodburyShortridge please see example at example/src/examples/SymbolCircleLayer/EarthQuakes.js

From first glance, the problem you are having is that you are using the short-hand ["+", ["get", "count"]]. Please instead use the full accumulator definition for adding up the values, as in the example.

I'll be honest here and say that my teams Obj-C skills were not enough to implement the short-hand on iOS. I'd love to see someone take our code and fix that, but until then you can get the exact result you need with just a bit of extra boilerplate.

[woodybury]

thanks @ivari makes sense. I've changed it to use the accumulated def sum: [["+", ["accumulated"], ["get", "sum"]], ["get", "count"]] however I'm still not getting the cluster property sum on the symbol layer at all.

I'm at the latests from rnmapbox/maps#main and $RNMapboxMapsVersion = '~> 10.5.0-beta1'

Is there something else I am missing here? Really appreciate your help and thanks again for the PR and pointing me to the example app 👍 !

Feature collection:

const featureCollection = {
'type': 'FeatureCollection',
'features': data.map(d => ({
	'type': 'Feature',
	'properties': {
		'iconSize': .5,
		'count': d.count, // int
	},
	'geometry': d.loc,
	'id': d.id,
})),
};

Shape source:

<ShapeSource
  id="source"
  hitbox={symbolHitbox}
  shape={featureCollection}
  cluster={true}
  clusterMaxZoom={14}
  clusterRadius={50}
  clusterProperties= {{
	  sum: [["+", ["accumulated"], ["get", "sum"]], ["get", "count"]]
  }}
  >
  <SymbolLayer
	  id="avatarPoints"
	  style={symbolStyle}
	  filter={['!', ['has', 'point_count']]}
  />
  <SymbolLayer
	  id="pointCount"
	  style={pointCountStyle}
  />
  <CircleLayer
	  id="clusteredSymbol"
	  belowLayerID="pointCount"
	  filter={['has', 'point_count']}
	  style={clusterSymbolStyle}
  />
</ShapeSource>

Point count style:

const pointCountStyle = {
	textField: ['get', 'sum'], // nothing here
	// textField: ['get', 'point_count'], // this works
	textSize: 12,
	textColor: 'white',
	textPitchAlignment: 'map',
};

[ivari]

@WoodburyShortridge sorry to disappoint you even further. We use $RNMapboxMapsVersion = '~> 5.9.0'. Never tried on 10. I can only assume it doesn't work on 10 as is. 🙁

[woodybury]

ahhh gotcha thanks @ivari 🙁. @mfazekas any insight into why this may not work on more recent versions?

[mfazekas]

@WoodburyShortridge can you add an issue for that?! It's just not yet implemented for v10 mapbox versions yet. Shouldn't be hard to implement.

[ahardy42]

is this implemented on the v8 branch? I don't see this clusterProperties prop used in the Earthquake example file. I can't get it to work in my project, and I'm not sure if it's just that I'm terrible with Mapbox expressions.

[mfazekas]

@ahardy42 I'm sure it's on #main so test with that