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>
);

Maybe the API has request number limitations. Have you checked the documentation? — kboul, Apr 22 '20 at 07:21
yes, but It's working locally and on a local network on the home network — Irtaza Hussain, Apr 22 '20 at 08:32

score 5 · Answer 1 · answered Oct 22 '20 at 19:01

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!

Mohab Khaled · Accepted Answer · 2020-10-22T22:08:33.093

4

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.

edited Oct 22 '20 at 22:08

answered Jul 02 '20 at 15:45

Mohab Khaled

167
1
8

You have not quite answered the question of where to put the API key, just given an alternative which may not be possible. – user2589273 Oct 13 '20 at 13:02
the main problem of getting 403 is not about putting an API key elsewhere, rather it's about the restrictions they put on their services when running code on production, this same code above would work on production if he had registered to the service. – Mohab Khaled Oct 22 '20 at 17:52
If you read his question *fully* you will see that he already has an API key and does not know how to embed it in the code. This means he is already registered but does not know how to tell the app that. – user2589273 Oct 22 '20 at 19:04

score 1 · Answer 3 · answered Aug 17 '21 at 10:18

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.

react-leaflet not loading tiles and gilving 403 request error

3 Answers3

Linked