Compass/Rotation control is unresponsive

[ninaray]

Description

The compass that allows you to click, drag, and rotate (change the bearing of) the map does not do anything when clicking and dragging it. I assumed this was not a native mapbox bug because the controls work fine in this example: https://docs.mapbox.com/mapbox-gl-js/example/navigation/

Repro Steps

Codepen with simple example: https://codesandbox.io/s/wonderful-platform-3hr1q?file=/src/App.js

• This react-map-gl example has the compass enabled, and clicking+dragging it does nothing. Meanwhile the + and - icons for zooming in and out of the map work as expected: https://visgl.github.io/react-map-gl/examples/draggable-markers
• Otherwise, you could just use the NavigationControl component (showCompass is default to true) and see that it is unresponsive

Environment:

• Library Version: react-map-gl 5.2.6 (the codepen version is 6.1.5)
• Mapbox Version: mapbox-gl 1.0.0
• React Version: react 16.8.6
• Browser Version: Chrome 90.0.4430.93
• OS: Mac OS X 10.16.7

[Pessimistress]

react-map-gl does not use the native NavigationControl because it is not React friendly. The React NavigationControl is implemented here.

In our implementation, the compass rotates with the map, and clicking on it resets the bearing. We do not have the drag to rotate feature on this button because we were not aware of it at the time it was implemented. You are encouraged to make a contribution if this is something important to your use case. I'm happy to discuss implementation details if you need some pointers.

[erictheise]

Found my way to this issue because with maplibre-gl 2.0.0-pre.1 and react-map-gl 6.1.17 I'm not seeing the compass arrows at all, or seeing any impact on the map using this control; I see "Reset North" on mouseover but that's it.

I wonder if others are seeing this. Could use some guidance and would be happy to work on this and @ninaray's initial issue.

[Pessimistress]

@erictheise maplibre made a breaking change in its css styles in 2.0, see discussion in #1513

[chriszrc]

@Pessimistress So, it looks like the bulk of the styles have been fixed now, but unfortunately the compass/rotation control is still missing it's icon. It does work however. Here's a codesandbox container with a running example with maplibre:

https://codesandbox.io/s/foss4g-maplibre-react-forked-1-wxc9r?file=/src/index.css

You can see the compass is missing. It appears the maplibre css expects the control to have a class named "mapboxgl-ctrl-icon". Given we can't add classes to the nested parts of NavigationControl (right?), we can at least add back the missing css to make the control show again:

/* Mapbox overrides */
.navigation-control * .mapboxgl-ctrl-compass .mapboxgl-ctrl-compass-arrow {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E");
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
}

[Pessimistress]

This is being addressed in v7.0. Please follow #1646