Is it possible to combine <Layer paint> and click on <Feature> ?

Hello !

I have this source

<Source id={'source-cities'} geoJsonSource={this.props.citiesGeoJSON} />

that I’m using for this layer

<Layer
  type='circle'
  sourceId={'source-cities'}
  id={'layer-1'}
  paint={
    'circle-radius': {
      property: 'population',
      type: 'exponential',
      stops: [
        // https://www.mapbox.com/mapbox-gl-js/style-spec#types-function-zoom-property
        [{zoom: 5, value: 0}, 3], // zoom, pop, radius
        [{zoom: 5, value: 855393}, 30], // zoom, pop, radius
    
        [{zoom: 10, value: 0}, 10], // zoom, pop, radius
        [{zoom: 10, value: 855393}, 50] // zoom, pop, radius
      ]
    }
  }
/>

And this is working fine, my circles radius are connected to the property ‘population’ .

But I can’t click on a point to display a popup. I need Feature component. So be it, I add all my Features :

<Layer
  type='circle'
  id={'clicklayer'}
  sourceId={'source-cities'}
  paint={
    'circle-radius': {
      property: 'population',
      type: 'exponential',
      stops: [
        // https://www.mapbox.com/mapbox-gl-js/style-spec#types-function-zoom-property
        [{zoom: 5, value: 0}, 3], // zoom, pop, radius
        [{zoom: 5, value: 855393}, 30], // zoom, pop, radius
    
        [{zoom: 10, value: 0}, 10], // zoom, pop, radius
        [{zoom: 10, value: 855393}, 50] // zoom, pop, radius
      ]
    }
  }
>
  {
    this.props.cities.map((city, i) => (
        <Feature
          key={i}
          onClick={() => console.log('click)}
          coordinates={city.geo}
        />
      ))
  }
</Layer>

Click on Feature is not working unless I remove the sourceId in Layer 😦 But if I do remove sourceId I am losing the paint (circle-radius depending on the property ‘population’.

How can I keep both click on Feature and paint style depending on a property ?

Thanks for your help !

[daniel-hauser]

We just released #675 that adds mouse events to <Layer> enjoy!

[vfonic]

Here’s another solution:

class PlacesMap extends React.Component {
  togglePopup = (map, { point, lngLat: { lng, lat } }) => {
    const [feature] = map.queryRenderedFeatures(point, { layers: ['fill'] });
    this.setState({ feature, popupLocation: [lng, lat] });
  }

  render() {
    return (
      <Mapbox
        {...props}
        onClick={this.togglePopup}
      >
        <Source id="places" geoJsonSource={this.geojson} />
        <Layer
          id="fill"
          type="fill"
          sourceId="places"
          paint={paint.fill}
        />
        {this.state.feature && (
          <Popup anchor="bottom" coordinates={this.state.popupLocation}>
            {this.popupContent}
          </Popup>
        )}
      </Mapbox>
    );
  }
}

I extracted this from real code. I hope it’s still usable.