Can't retrieve id from a geoJSON Feature when clicking on it

[marcnajera]

Hi,

I'm trying to figure out which Features are being clicked when loaded from a GeoJSON into a Layer. I've added the layer as part of the interactiveLayerIds array and when I click on the feature I can see all the feature's properties, the source and layer it comes from, but id is always undefined (although it's part of the geoJson object).

My setup:

<Map interactiveLayerIds={['routes']} onClick={e => console.log((e.features))} {...otherProps}>
  <Source id='routes-source' type='geojson' data={myGeoJsonData}>
    <Layer id='routes' {...otherProps} />
  </Source>
</Map>

The data looks something like this:

const myGeoJsonData:FeatureCollection = {
  'type': 'FeatureCollection',
  'features': [{
    'id': 'This is the ID I want to retrieve',
    'type': 'Feature',
    'properties': {
      'name': 'Feature name',
      'description': 'Feature description',
      'otherData': {}
    },
    'geometry': {
      'type': 'LineString',
      'coordinates': [[ 1.7905286,42.3095544],[1.7150543,42.298763],[1.7162075,42.2452094],[1.7243635,42.258054]]
    }
  }, ... ]
}

I know I could see the id if it was stored inside the feature's properties, but it isn't optimal since I can't change how the data is stored on the database. Also, I've tried to pass in promoteId='id' to the Source but without any luck.

Any ideas on how can I achieve that?
Thanks!

[tiacop]

Hi,
you can add "generateId" (https://docs.mapbox.com/help/tutorials/create-interactive-hover-effects-with-mapbox-gl-js/#feature-state-and-expressions) to your source:

<Source id="nutsregions" type="geojson" data={nutsMap} generateId={true}>
  <Layer {...nutsLayer} beforeId="waterway-shadow" />
</Source>