Change Tile Size of Mapbox Tiles using React Leaflet

Question

Is it possible to change the tile size of Mapbox tiles when using react-leaflet ?

The rendered tiles has text that look too tiny, which makes me think that these are 512px tiles being treated by Leaflet as 256px tiles. I am experiencing this on an external monitor connected to a Macbook Pro (with Retina screen). Not sure if the retina screen affects anything.

Looked into the react-leaflet docs for TileLayer but it does not expose the tileSize parameter. Mapbox's tile URL template also doe not accept a parameter for defining the tile sizes.

Is there another way to adjust the tile size? Thank you!

import { MapContainer, TileLayer, Marker } from 'react-leaflet';

export function MapView({markers, center}) {
    return (
        <MapContainer center={[center.at, center.lon]}>
            <TileLayer 
                url={`https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=${config.mapbox}`}
            />
                { markers.map((marker, index) => (
                    <Marker position={[marker.lat, marker.lon]} key={index} />
                ))}
        </MapContainer>
    )
}

Answer 1

You can create your own TileLayer component and define the tileSize with zoomOffset

 function TileLayer() {
    const map = useMap();

    useEffect(() => {
      new L.TileLayer(
        `https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=${yourToken}`,
        {
          tileSize: 512,
          zoomOffset: -1
        }
      ).addTo(map);
    }, []);

    return null;
  }

and use it as a regular MapContainer's child.

Here is a similar thread in vanilla leaflet