[Feat] Custom map.querySourceFeatues Renderer

[JaeSeoKim]

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.

• https://github.com/JaeSeoKim/poc-react-map-gl-query-source-featues

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.

[Jdyn]

+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.

[JaeSeoKim]

@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

• https://react.dev/reference/react-dom/flushSync