[Bug]: projection mercator not working

[Ladvace]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS

@rnmapbox/maps version

^10.0.15

Standalone component to reproduce

import React, { useEffect, useState, useRef } from "react";
import { Alert, Image, StyleSheet, View } from "react-native";
import Mapbox from "@rnmapbox/maps";
import * as Location from "expo-location";
import { Button } from "react-native";

Mapbox.setAccessToken(
  "MY_TOKEN"
);

const App = () => {
  const [location, setLocation] = useState();


  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        return;
      }

      let location = await Location.getCurrentPositionAsync({});

      setLocation(location);
    })();
  }, []);

  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.MapView
          style={styles.map}
          followsUserLocation={true}
          region={location?.coords || []}
          projection="mercator"
          compassEnabled
          onLongPress={(f) => {
            console.log("Coordinates", f.geometry.coordinates);
          }}
        >
        </Mapbox.MapView>
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  container: {
    height: "100%",
    width: "100%",
  },
  map: {
    flex: 1,
  },
  annotationContainer: {
    alignItems: "center",
    backgroundColor: "white",
    borderColor: "rgba(0, 0, 0, 0.45)",
    borderRadius: 50 / 2,
    borderWidth: StyleSheet.hairlineWidth,
    height: 50,
    justifyContent: "center",
    overflow: "hidden",
    width: 50,
  },
});

Observed behavior and steps to reproduce

when I set the projection to mercator on the Mapbox.MapView I still see the globe and not the "flat" Mercator map

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response

[mfazekas]

import React, { useEffect, useState, useRef } from 'react';
import { Alert, Image, StyleSheet, View } from 'react-native';
import Mapbox from '@rnmapbox/maps';
import { Button } from 'react-native';

const App = () => {
  const [location, setLocation] = useState();

  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.MapView
          style={styles.map}
          followsUserLocation={true}
          region={location?.coords || []}
          projection="mercator"
          compassEnabled
          onLongPress={(f) => {
            console.log('Coordinates', f.geometry.coordinates);
          }}
        />
      </View>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    height: '100%',
    width: '100%',
  },
  map: {
    flex: 1,
  },
  annotationContainer: {
    alignItems: 'center',
    backgroundColor: 'white',
    borderColor: 'rgba(0, 0, 0, 0.45)',
    borderRadius: 50 / 2,
    borderWidth: StyleSheet.hairlineWidth,
    height: 50,
    justifyContent: 'center',
    overflow: 'hidden',
    width: 50,
  },
});

If I run this code I don't see a globe.

[Ladvace]

I have to check why in my case it get ignored then

[Ladvace]

basically It works fine on android but not on IOS

[mfazekas]

I've tested on iOS simulator. Are you trying the exact same component as described on #3254 (comment), can you take a screenshot?

[Ladvace]

the only different is actually a custom styleURL I've applied and it actually seems working without it

[RemiHin]

Im running in to this issue right now. Happens when i use the mapbox://styles/mapbox/dark-v11, mapbox://styles/mapbox/satellite-streets-v12, mapbox://styles/mapbox/light-v11, mapbox://styles/mapbox/outdoors-v12 or mapbox://styles/mapbox/streets-v12 styleUrl,

but not when using the others listed here: https://docs.mapbox.com/api/maps/styles/#classic-mapbox-styles

@Ladvace did ever solve it?

[Crysp]

@RemiHin you can solve it with custom styles. Create your own style in "Mapbox Studio" from default mapbox://styles/mapbox/streets-v12 and set projection to "mercator" as default.

[Ladvace]

@RemiHin sorry for late reply, I got the same problem, I managed to "fix" just not using the styling