Azure maps drawing module breaks hover style

Question

Good morning!

Using the samples, I have the simple case of setting the cursor to pointer when the user hovers over a pin on the map; something akin to:

this.map.events.add('mouseover', layer, () => this.map.getCanvasContainer().style.cursor = 'pointer');  

And a similar mouseout event for putting it back to grab. This works, no problems.

However, when I load the drawing module, this no longer works. If I inspect the elements, I can see the style is still switching between pointer and grab as I hover in the DOM, but it has no effect on the pointer at all any more...

Drawing module is loaded with something similar to:

this.drawingManager = new azDrawing.drawing.DrawingManager(this.map, {...});  

The drawing stuff itself works fine. Though, actually, 'fine' is an operative word, because whist I'm drawing a polygon, the line rendering between the point and the cursor doesn't actually render properly. It doesn't update and render until I stop moving the mouse.
The samples have it nice and smooth and clearly rendering and following the mouse as it moves, but my implementation doesn't render that line until I stop moving the mouse.

I programmatically enter drawing mode with the simple:

this.drawingManager.setOptions({  
        mode: azDrawing.drawing.DrawingMode.drawPolygon  
    });  

Omitted from the above module loading are just the options for enabling dragging and rotation that I have turned on.

It's a fairly simple setup, but there seem to be side effects and I don't really know where to look for what might be causing them to fix them.

Oh, additional version information...
This is using an Angular (12) SPA, and the following map imports in my index:
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
<script type="text/javascript" src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js" async defer></script>

Any ideas on where I can look and/or more information required?

Thanks.

Answer 1

I went through and managed to reproduce your issue with the mouse cursor. Digging into this I eventually found the issue. The drawing manager sets the cursor on the map canvas element, while in most samples and your code, the cursor is set on the map container for the canvas (DIV element that the canvas is inside of). As such, the drawing manager sets the cursor to it's default state on the canvas when loaded, and that cursor takes priority over the parent map container. The solution if fairly simple, use map.getCanvas() instead of map.getCanvasContainer(). So the following should work:

   this.map.events.add('mouseover', layer, () => this.map.getCanvas().style.cursor = 'pointer');  

However, I did find that this ends up overriding the drawing managers behavior. With this in mind a solution is to check to see if the drawing manager is actively being used to draw. If it is, then don't set the cursor. Here is a sample that demonstrates this.

   //Create an instance of the drawing manager and display the drawing toolbar.  
   drawingManager = new atlas.drawing.DrawingManager(map, {  
   	toolbar: new atlas.control.DrawingToolbar({ position: 'top-right' })  
   });  
     
   //Load some source data.  
   datasource = new atlas.source.DataSource();  
   map.sources.add(datasource);  
     
   datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');  
     
   //Create a layer.  
   layer = new atlas.layer.SymbolLayer(datasource);  
   map.layers.add(layer);  
     
   //Add mouse events to power hover experience.  
   map.events.add('mouseover', layer, () => {  
   	if(drawingManager.getOptions().mode === 'idle'){  
   		map.getCanvas().style.cursor = 'pointer';  
   	}  
   });	  
     
   map.events.add('mouseout', layer, () => {  
   	if(drawingManager.getOptions().mode === 'idle'){  
   		map.getCanvas().style.cursor = 'grab';  
   	}  
   });