Getting a list of all visible features - queryRenderedFeatures

[Niamh1]

Hey! I am looking to get a list of all the Markers I have added to the map, which are in view. I have been trying to use map.queryRenderedFeatures(), but I cannot figure out where to put "my-layer-name" from the example

* @example
* Query all rendered features from a single layer
* ```ts
* let features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });
* ```

I currently have a GeoJson, with the id as "my-layer-name"

<GeoJSON
	id="my-layer-name"
	data={json}
	cluster={{
		radius: 1500,
		maxZoom: 14,
	}}>

but the query returns an empty list: let features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });

If I remove the feature option query let features = map.queryRenderedFeatures() I can see the features in the list with layer properties
layer: {id: 'fill-1729608083725', type: 'fill', source: 'my-layer-name', minzoom: 0, maxzoom: 24, …} with the "source" as "my-layer-name". On the map tiles there are features which have constant "id" fields and I am able to query to get those. But on the markers I have added via the MarkerLayer the "id" field keeps changing, so the query does not work.

Any idea on how I can get the Markers I have added, which are in a bounding box/in view?

Thanks!

[dimfeld]

Yeah this is a bit tricky.

In my email notifications I saw you wrote something about using querySourceFeatures, but maybe deleted it. Did that not work for you?

The MarkerLayer code actually uses that same function internally to manage the list of visible markers. The trick is that Markers live in the HTML DOM rather than being part of the WebGL side, so the query*Features functions don't normally work for it. MarkerLayer works around this by creating an invisible FillLayer so that the query will have something to look at, and that's actually what you are seeing with those fill layers.

Can you go into more detail about what you're actually seeing and what the query functions are returning when you call them? Specifically around this sentence:

But on the markers I have added via the MarkerLayer the "id" field keeps changing, so the query does not work.

[dimfeld]

BTW if you don't have too many markers, it might also work for you to just put a move or moveend event handler on the map and then read the map's bounding box in there and create a filtered list of where the bounding box overlaps with your GeoJSON.

[Niamh1]

Thanks for the response.
I realised the querySourceFeatures works OK, but it is not only returning what is in view on the map -- there are extra markers in there (although not every marker).
And with the "id" comment I think I was confused on what the parameters to queryRenderedFeatures was trying to search for.

Your suggestion on the bounding box has worked perfectly. Thanks!

[dimfeld]

I checked over the documentation again and it looks like querySourceFeatures needs a bit of extra filtering to make it into a strict bounding box check, since it does something like checking features in all the currently visible map tiles, which will extend a bit outside the viewport.

Anyway, glad you got it working!