I am currently taking my first steps in using maplibre together with react-map-gl.
I have read the documentation about how to use a fork of mapbox.
I have adapted webpack-config
. I use a create-react-app project with rewind. This is my config-overrides.js.
module.exports = function override(config, env) {
//do stuff with the webpack config...
module.exports = {
webpack: (config) => {
config.module.rules.push({
resolve:{
alias: {
...config.resolve.alias,
'mapbox-gl': 'maplibre-gl'
}
}
})
// Important: return the modified config
return config
},
}
return config;
}
With the following code I see the map from Maptiler a few seconds, which is loaded via maplibre.
import React, { useState } from "react";
import ReactMapGL from "react-map-gl";
export const Map = () => {
const [mapViewport, setMapViewport] = useState({
height: "100vh",
width: "100wh",
longitude: 2.571606,
latitude: 45.226913,
zoom: 5
});
return (
<ReactMapGL
{...mapViewport}
//mapboxApiAccessToken="MapboxToken"
mapStyle= 'https://api.maptiler.com/maps/streets/style.json?key=MaptilerToken'
onViewportChange={setMapViewport}
></ReactMapGL>
);
};
Then it disappears and I see this error message in the console of my browser.
Error: A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://account.mapbox.com/
If I use the line mapboxApiAccessToken="MapboxToken"
, I can use the maptiler map without a problem.
import React, { useState } from "react";
import ReactMapGL from "react-map-gl";
export const Map = () => {
const [mapViewport, setMapViewport] = useState({
height: "100vh",
width: "100wh",
longitude: 2.571606,
latitude: 45.226913,
zoom: 5
});
return (
<ReactMapGL
{...mapViewport}
mapboxApiAccessToken="MapboxToken"
mapStyle= 'https://api.maptiler.com/maps/streets/style.json?key=MaptilerToken'
onViewportChange={setMapViewport}
></ReactMapGL>
);
};
But I don't want to need a mapbox token any more. What am I missing ?
I asked this question here as well.
The override was the problem. The config-overrides.js should look like this