Compass location on react-native Mapbox map

Question

Is it possible to change the location of the compass in React-Native Mapbox GL? It currently defaults to the top-right and I have been trying to find how to move it to the top-left.

<Mapbox.MapView
                    ref={component => this.map = component}
                    styleURL={this.state.mapStreetView}
                    zoomLevel={this.state.defaultZoom}
                    centerCoordinate={[this.state.long, this.state.lat]}
                    showUserLocation={true}
                    onPress={this.onLocationPress}
                    zoomEnabled={true}>

@McWayWeb I added the code for the component. Its jut standard code. Are you familiar with Mapbox for react native? — jengin, Jul 19 '19 at 18:01
I am having the same issue where I am not able to update the position of the compass icon or even change the icon to use custom ones - I think the feature is present on native side in the mapbox-gl-native repo, but its RN bindings are not yet added. See - https://github.com/react-native-mapbox-gl/maps/issues/112 — Awadhoot, Aug 02 '19 at 14:24

score 1 · Answer 1 · answered Feb 03 '20 at 06:59

1

It's possible with iOS - since #389. See compassViewPosition and compassViewMargins on MapView

answered Feb 03 '20 at 06:59

mfazekas

5,589
1
34
25

score 0 · Answer 2 · answered Aug 12 '19 at 06:10

0

No you can't move the compass position, you can only show it or hide it with the compassEnabled property. (https://github.com/react-native-mapbox-gl/maps/blob/master/docs/MapView.md)

answered Aug 12 '19 at 06:10

Simon Robert

111
5

score 0 · Answer 3 · answered Jul 01 '22 at 17:32

there is a bug in react-native-mapbox-gl/maps 8.5.0 version in android part. They cut density to int when multiply layout pixels and density. (for example, my devices has 2.8125 and 2.75 dencity, but mapbox counts them as 2.

the bug is in @react-native-mapbox-gl/maps/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java in updateUISettings method and looks like

int pixelDensity = (int)getResources().getDisplayMetrics().density;

so on js side you can simply fix this with coefficient

const androidPixelRatio = PixelRatio.get();
const androidDensityCoefficient = androidPixelRatio / Math.floor(androidPixelRatio);
compassViewMargins = {
    x: layoutX * androidDensityCoefficient;
    y: layoutY * androidDensityCoefficient;
};
<MapboxGL.MapView
    {...restProps}
    compassViewMargins={compassViewMargins}
/>

Compass location on react-native Mapbox map

3 Answers3