I am using react-leaflet with tile provider Stadia OSM bright. when I run it locally Is showing tiles but when I make build and upload to server It stops loading tiles and starts giving request 403 forbidden error. I have an API key but not finding any solution where to put it in the component. here is a code sample
render() {
const headeris = {"Authorization": "Stadia-Auth "+this.state.authkey}
return (
<LeafletMaps
center={[this.state.lat, this.state.lng]}
zoom={12}
maxZoom={17}
attributionControl={true}
zoomControl={true}
doubleClickZoom={true}
scrollWheelZoom={true}
dragging={true}
animate={true}
easeLinearity={0.5}
>
<TileLayer
url="https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png"
attribution= '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
/>
{this.state.markers.map((position, index) => (
<Marker
key={`marker-${index}`}
position={[position[0][4], position[0][5]]}
>
<Popup>
<p>{position[0][0]}</p>
<a href={`/admin/calender/${position[0][2]}`}>Book now</a>
</Popup>
</Marker>
))}
</LeafletMaps>
);
general description and alternative solution (for quite complete solution regarding Api insertion see user2589273 answer below), i've also been tricked at first but all resolved now. As Stadia Maps States in their Api keys page, "You can get started developing locally without any effort or cost. You can get started right away with a web server running on localhost or 127.0.0.1. Once you're ready to deploy, you can sign up for free". please refer to https://docs.stadiamaps.com/#api-keys , so you need to signup if you are using it in production, they have a free plan (up to 2500 requests per day for non commericals). note that you don't need an api key, as they have another solution includes providing your domain name so they can track your traffic.