[Feat] Custom map.querySourceFeatues Renderer

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.

Start by reviewing the linked POC repository and the cluster HTML examples to understand the proposed QuerySourceFeatures API. Compare its behavior with this proposal, including data, move, and moveend updates, and confirm that rendered querySourceFeatures content can follow React's lifecycle without manual handling.