[Feat] Custom map.querySourceFeatues Renderer
JaeSeoKim opened this issue · 2 comments
Target Use Case
This feature is allows you to render content received via the querySourceFeatues
function without worrying about React's lifecycle.
Example
Display HTML clusters with custom properties
- https://maplibre.org/maplibre-gl-js/docs/examples/cluster-html/
- https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/
Proposal
The QuerySourceFeatures (temporary name) component receives the arguments of the querySourceFeatures
function, and additionally the target component that should be rendered via render
.
Internally, the component references events for data
, move
, and moveend
, and renders through the passed in render
if any data has changed.
Here's example code to use
<QuerySourceFeatures
source="earthquakes"
filter={["==", "cluster", true]}
render={({ data }) => {
<Marker
longitude={data.geometry.coordinates[0]}
latitude={data.geometry.coordinates[1]}
>
<DonutChart properties={data.properties!} />
</Marker>
}}
/>
I've written POC code in the following repo.
If you think it's a good idea to add these features, please review them for further improvements and I'll write a PR.
Otherwise I'll PR that POC code as an example.
+1 Since I recently implemented this exact use case and your implementation looks pretty sound.
I am curious if you noticed any tangible benefits using flushSync
and useLayoutEffect
since I implemented this originally with just setState
and useEffect
and it works identically from what my eyes can see, although I was using a small set of features.
@Jdyn In fact, in the case of useLayoutEffect, it is said to work before browser paint, but I am not sure if it will work in this case as well. 😅
However, with flushSync, React's State update doesn't work synchronously, so if you don't use that logic, you can quickly move the screen and zoom in and out, you'll see the component partially delayed and rendered.
It will help you understand if you refer to the official document