How do I increase the font size of contents in Map in Leaflet.js?

Question

I am using Leaflet JS for displaying my map.

Following is my code. The map gets displayed. But the size of the city names are not large. Each time I zoom in, the font size is very less. It is not readable.

var mymap = L.map('maps1').setView([19.8762, 75.3433], 7);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={access_token}', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        id: 'mapbox/streets-v11',
        accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
L.marker([19.8762, 75.3433]).addTo(mymap).bindPopup('Aurangabad');

Answer 1

If you look at a single tile, the native resolution is 512x512, whereas the default tileSize in the tileLayer API is 256

Try setting the tileSize and zoomOffset:

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={access_token}', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    id: 'mapbox/streets-v11',
    accessToken: 'your.mapbox.access.token',
    tileSize: 512,
    zoomOffset: -1,
}).addTo(mymap);

zoomOffset needs to be -1 to account for the larger tiles, so they cover the expected pixel coordinates. See this issue for some discussion about zoomOffset and why this needs to be set in addition to tileSize