azure-maps events not being added correctly in some scenarios

Question

I have attempted adding events to map layers in various parts of my project, some work correctly and some don't, using the exact same code below.

mapRef.events.add('ready', () => { 
          const dataSource = new atlas.source.DataSource()
          mapRef.sources.add(dataSource)

          const point = new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]))
          dataSource.add(point)

          const layer = new atlas.layer.SymbolLayer(dataSource)

          mapRef.events.add('mouseover', layer, () => {
            console.log('layer mouseover event detected')
          })

          mapRef.layers.add(layer)
   }

)

In my debugging of the map object I noticed that the added layer event callback gets placed in the
map.mapCallbackHandler.callbacks
Map with the layer Id as the key. In the failing examples where the layer event doesn't trigger to the added event, the callback is not added to callbacks Map but instead is found in
map.layers.[layer].listeners
Map object. I find this strange as I am using the same code to add an event but I am getting two different state changes to map. I understand this may be hard to drill down, but any ideas on what could be going wrong here?

Answer 1

Never heard of anyone running into this kind of issue. The mapCllbackHandler I believe is where map events are stored and the layer listeners is where the layer events are stored, so that looks fine.

Note that mouseover only fires when the mouse initially goes over a layer. If you have multiple shapes close together with no pixel gap between them and move from one shape to another, this event won't fire since its the same layer. If you want to know when a new shape is hovered, you will need to use the mouse move event and consider tracking the active shape. For example:

var currentShape;

//Monitor movement over a layer.
map.events.add('mousemove', layer, function (e) {
    var id = e.shape[0].getId();

    //If the mouse is over the same shape, ignore it.
    if(id === currentShape){
        return;
    }

    //New shape detected.
    currentShape = id;

    //Add your event logic here.
});

//Clear the tracked shape.
map.events.add('mouseleave', layer, function (e) {
    currentShape = null;
});