NetworkError when using MapBox styles with MapLibre and React-map-gl

[victcebesp]

Hello guys, I was trying to update a legacy project on which I am working on from using MapBox to MapLibre. In order to do that, I followed the tutorial on the react-map-gl website. However, when I try to use a mapbox style on a Map I am getting the following error:

Error: NetworkError when attempting to fetch resource. (Firefox)

And on Google Chrome I am getting also this: Fetch API cannot load mapbox://styles/mapbox/streets-v9. URL scheme "mapbox" is not supported.

I first thought that it was related to the token but it looks like the navigator is having some issues to fetch data from a mapbox:... URL.

What am I missing?

I am testing this on a brand-new create-react-app project with the following App.js:

import "./App.css";
import Map from "react-map-gl";
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

function App() {
  return (
    <div className="App">
      <Map
        mapboxAccessToken="MY_TOKEN_HERE"
        mapLib={maplibregl}
        initialViewState={{
          longitude: -100,
          latitude: 40,
          zoom: 3.5,
        }}
        mapStyle="mapbox://styles/mapbox/streets-v9"
      />
    </div>
  );
}

export default App;

And here is my package.json:

{
  "name": "maplibre-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "maplibre-gl": "^2.1.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-map-gl": "^7.0.6",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Thank you very much!

[Pessimistress]

maplibre-gl does not support mapbox:// resources as it is a private protocol. If you are going to use a Mapbox token anyways why not just use mapbox-gl?

[victcebesp]

Thank you very much for your explanation. I am new to mapbox and maplibre and I did not know that. Thanks!

The idea was to let users decided whether they want to use mapbox or maplibre by saving their token somehow instead of using our token. But we will probably transition to fully maplibre and maybe in the future handle this.

Thanks again!

[Pessimistress]

I believe there is a way to use Mapbox styles with maplibre by expanding the url to https://api.mapbox.com/.... You will have to look in their documentation.

[victcebesp]

Yeah but the issue is that on the retrieved style there might be also mapbox:... urls. Thanks for the suggestion!