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';
}
});