Mapbox gl : On mouse hover on layers change cursor pointer style

Question

I have 10 to 15 different different layers for example car,bus,route etc etc.These layer i am adding dynamic on map when if needed because all the time all layers are does not exist on map.

So i am showing info on single click about layers,but i want when i hover mouse on layer change mouse pointer cursor style to 'crosshair'.

i have written change cursor style on mouseenter event but it seems sometimes working and sometime even though mouse is on hover on layer but cursor style does not get changed.

First way:

 map.on('mouseenter', (e: any) => {
      self.mapInstance.getCanvas().style.cursor = 'crosshair';
    });

Second Way:

      map.on('mouseenter',(e: any) => {         
       var features = map.queryRenderedFeatures(e.point,{ layers: ['Car',"Bus"] });
//error let's say any layer still on exist on map
        if(features.length)
         map.getCanvas().style.cursor = 'crosshair';    
            });

My issues:

1. Cursor style not getting change

2. Error on queryRenderedFeatures like layer does not exists

3. Mouse flickering on hover layer

How to get change style of the cursor on mouse hover on different different layers?

Answer 1

map.on('mouseenter', 'clusters', () => {
  map.getCanvas().style.cursor = 'pointer'
})
map.on('mouseleave', 'clusters', () => {
  map.getCanvas().style.cursor = ''
})

This is how to get it working with clusers specifically but the code might still be helpful.

Good luck !