Mapbox ID layer cannot be selected - mapbox

Question

I have added layer in mapbox, and then add click on it to trigger popups. That works fine and looks like this:
map.addLayer({
"id": "circle",
"type": "circle",
"source": "companies",
"paint": {
"circle-radius": 20,
"circle-color": "#C6DB3E",
"circle-opacity": {
"stops": [[3, 0.1], [22, 0.8]]
}
}
});
And here I select that layer for triggering popup:
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ["circle"]
});
if (!features.length) {
return;
}
var feature = features[0];
console.log(feature);
// Populate the popup and set its coordinates and content
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML('...')
.addTo(map);
});
But problem appears when I changed layer to use dynamic circle-radius, and layer now looks like this:
map.addLayer({
"id": "circle",
"type": "circle",
"source": "companies",
"paint": {
"circle-radius": {
property: 'Size',
type: 'identity'
},
"circle-color": "#C6DB3E",
"circle-opacity": {
"stops": [[3, 0.1], [22, 0.8]]
}
}
});
This layers is also printed properly to the map. But I cannot click on it to get a popup. So after changing circle-radius, ID is not clickable.
Funny is that if I consoleLog ID's with map.getStyle().layers, ID appears in console, with all other layers.
No errors.

Answer 1

The style syntax for circle-radius is not valid. See Mapbox Style Spec for expressions or this other answer.
Also: You can simplify the click handler by providing the id of the layer as the second parameter:
map.on('click', 'circle', function (e) {
var features = e.features;
if (!features.length) {
return;
}
var feature = e.features[0];
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML(feature.properties.someProperty)
.addTo(map);
});
Mapbox has an example of this on their site: https://www.mapbox.com/mapbox-gl-js/example/popup-on-click/

Answer 2

I updated mapbox and it worked fine, with code I posted in question. I also tried what u suggested and it works too. Thanks #Eczajk! At the end I ended up with this code for circle radius:
"circle-radius": {
property: 'Size',
type: 'exponential',
stops: [
[4, 4],
[170, 170]
]
}
And here is explained example: https://www.mapbox.com/help/gl-dds-map-tutorial/