Questions re Map component

[RobJacobson]

Forgive my inexperience. I'm just getting started with maplibre-react-native. Here's a minimal working example, with some questions below:

const Map = () => {
  return (
    <>
      <View
        style={{
          flex: 1,
        }}
      >
        <MapView
          compassEnabled
          pitchEnabled
          mapStyle="https://api.maptiler.com/maps/ocean/style.json?key=[omitted]"
          style={{ flex: 1 }}
        >
          <Camera
            animationDuration={10000}
            zoomLevel={7}
            centerCoordinate={[-122.335167, 47.608013]}
            pitch={65}
          />
        </MapView>
      </View>
    </>
  );
};

First, should the compass be appearing? This is not working for me on Android atm, when building with Expo EAS.

Second, the map pitch appears to have an upper bound of 60. When I try to use something higher, like 65, it appears to be clamped. Is that expected? This discussion suggests that the main MapLibre library supports pitch up to 180. (I'm not sure who wants an upside-down map.)

https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/
maplibre/maplibre-gl-js#4870

There is a maxPitch option that defaults to 60. However, that doesn't appear to be configurable in mlrn.

Third, with the camera settings above, the camera starts at [0, 0] and then does a FlyTo to the desired coordinates. (The setting of 10000 makes that obvious.) This can be set to 0 explicitly to disable the animations, but I would prefer to avoid that. Without an explicit setting, it starts at [0, 0] and flies to the new location quickly. Can this be avoided? With the main MapLibre library, there's a "center" parameter in the constructor.

https://maplibre.org/maplibre-gl-js/docs/

Thanks!

[KiwiKilian]

In general for checking if something is available in general you would want to check MapLibre Native for iOS and Android. While Native aims to match parity with JS it's different in some parts. The of course there can be additional limitations of the wrapper.

• Compass should be working, maybe it only appears when you start rotating?
• Maximum Pitch defaults indeed to 60 (iOS, Android)
  • I think it isn't exposed currently through MLRN for customization, PRs welcome
• To specify the initial Camera use the defaultSettings prop

I hope this helps on getting started!