react-leaflet not loading tiles and gilving 403 request error

Question

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= '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <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>
);

Answer 1

Section for other people As mentioned you need to first register to get an API key if not developing locally. From your question I can see that you have done that and are asking where to insert the key once you have it.

Once registered you can

• Add your website domain to the Stadia whitelist using the dashboard presented

• However if like me you are not using a specific website, or location you may instead append the API key to the URL. NOTE: Rather than the usual ?apikey= syntax Stadia opts for the use of an underscore ?api_key= (this caught me out too!).

This means you need to change your code in the following way to get it to work:

<TileLayer 
    url="https://tiles.stadiamaps.com/tiles/osm_bright/
    {z}/{x}/{y}{r}.png?api_key=your_api_key_goes_here"
   
<... rest of code ...>

Hopefully, that should solve your problem - good hacking!

Answer 2

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.

Answer 3

Stadiamaps also supports adding a domain next to API keys. When you create a property, you have the option to generate an API key or add a domain. When serving your website with javascript opt for the domain. As you generally don't want to expose your keys.