[Bug] Map projection "globe" is not working in react-map-gl

[cnavarreteliz]

Description

Hi all,

I'm trying to create a 3D globe in my React project. However, when I use the projection="globe" property, it maintains the default projection.

Expected Behavior

No response

Steps to Reproduce

import React, {useEffect, useState} from "react";
import Map, {FullscreenControl, GeolocateControl, Layer, Marker, NavigationControl, Source} from "react-map-gl";

export default function GlobeMap(props) {

  const [viewport, setViewport] = useState({
    latitude: 0,
    longitude: 0,
    zoom: 1,
    bearing: 0,
    pitch: 0
  });
  return (
    <Map
      {...viewport}
      mapboxAccessToken="MY_API_KEY"
      style={{width: "100%", height: "500px"}}
      projection="globe"
      onViewportChange={(newViewport) => setViewport(newViewport)}
      mapStyle="mapbox://styles/mapbox/dark-v10"
    >
      <GeolocateControl position="top-left" />
      <FullscreenControl position="top-left" />
      <NavigationControl position="top-left" />
    </Map>
  );
}

Environment

• Framework version: Nextjs 14.2.2
• Map library: 7.1.7
• Browser: Google Chrome
• OS: Windows 11

Logs

No response

[cnavarreteliz]

Alright, I will close this issue because I was using mapbox-gl v1.x. To fix the issue, I updated it to the latest version npm i mapbox-gl@latest