'Blurry leaflet OpenStreetMap

I am trying to add a precipitation tilelayer to my OpenStreetMap with below code but got a blur map. Anyone know how to fix it please? Maybe need to add attribute?

My code is as follow:

    <MapContainer center={[weather.lat, weather.lon]} zoom={5} minZoom={3} maxZoom={8}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url='http://{s}.tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=?'
      opacity= {0.9}
    />
    <Marker position={[weather.lat, weather.lon]}>
      <Popup>
        {weather.city} is here!
      </Popup>
    </Marker>
  </MapContainer>

The blur map looks like this: blur map

The map should like the precipitation map here: https://openweathermap.org/api/weathermaps

Thanks in advance.

leafletopenstreetmapopenweathermap


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions