How to get the coordinates of a filtered polygon with MapBox?

Question

Sorry for my English.

I have data on mapbox in vector tiles.

I made a function where a user can select a plot and validate with a button. I get the parcel ID. When clicked on the button, the map is updated and only the plot polygon is colored using a filter :

       map.addLayer({
        'id': 'parcelle-data-highlighted',
        'type': 'fill',
        'source': 'centremapbox',
        'source-layer': 'centremapbox',
        'paint': {
            'fill-outline-color': '#3c3c3b',
            'fill-color': '#afca0b',
            'fill-opacity': 0.75
        }
       });

       map.setFilter('parcelle-data-highlighted', [
        'in',
        'ID_PARCEL',
        ''+ parcel +''
       ]);

It works !

Then, I don't understand how to retrieve the coordinates of the polygon that I have colored via the filter. I tried things with map.queryRenderedFeatures and map.querySourcesFeatures but I only get empty data.

Can someone explain to me the procedure to follow, despite the doc, I can't do it. My goal is to retrieve the coordinates to zoom in on them.

Thank you very much for your help.

Olivier

Steve Bennett Steve Bennett · Accepted Answer · 2020-04-03T09:49:51

The thing you're trying to do is not exactly possible, although there are sort of hacky workarounds. Basically, you're asking mapbox-gl-js to tell you where a given feature is - but it doesn't really know. What if the feature is off the screen? On the other side of the world? It doesn't know.

Usually the best solution is to have an alternative means of finding out where features are: an index, like a big object that maps parcel ID to long/lat.

In cases where the polygon is definitely within the viewport, using map.querySourceFeatures should work. You didn't include any source code on that part of your attempt, so I can't comment on what went wrong in your case.

How to get the coordinates of a filtered polygon with MapBox?

1 Answers