Mapbox ID layer cannot be selected

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.

eczajk eczajk · Accepted Answer · 2018-09-19T16:45:52

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/

Mapbox ID layer cannot be selected

2 Answers