How can I add an event listener to a mapbox image/raster layer?

Question

I am trying to add an event listener to an image layer with mapbox gl, but it doesn't seem to work, is it even possible with this type of layer? Here is a codepen demonstrating the problem:

https://codepen.io/anon/pen/drBdLm

var mapStyle = {
  'version': 8,
  'sources': {},
  'layers': []
}

var map = new mapboxgl.Map({
  container: 'map',
  maxZoom: 5,
  minZoom: 1,
  zoom: 5,
  center: [-75.789, 41.874],
  style: mapStyle
})

map.on('load', function() {
  map.addSource('firstim', {
    type: 'image',
    url: 'https://small-systems.org/dev/093-hvb/cms/site/assets/files/1104/6_umspannwerk_sellerstrasse.700x0.jpg',
    coordinates: [
      [-80.425, 46.437],
      [-71.516, 46.437],
      [-71.516, 37.936],
      [-80.425, 37.936]
    ]
  })

  map.addLayer({
    id: 'images',
    type: 'raster',
    source: 'firstim',
    paint: { 'raster-opacity': 1 }
  })

  map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['images'] });
    var clusterId = features[0];
    // console.log(clusterId)
  });

  map.on('click', 'images', function (e) {
    console.log(e)
  });  
})

I've tried adding a an event on the layer with map.on('click', layerID, function), but it does't work. Neither does using queryRenderedFeatures.

Thanks for any help.

AndrewHarvey AndrewHarvey · Accepted Answer · 2019-03-28T05:13:06

This is not implemented yet https://github.com/mapbox/mapbox-gl-js/issues/1404.

As a workaround you'll need to listen to all click events and then do your own test to see if the click is within the bounds of your image.

How can I add an event listener to a mapbox image/raster layer?

1 Answers