2

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

enter image description here

3

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

|improve this answer|||||
  • Can you explain also zoomOffset: -1 setting? – TomazicM Jan 2 at 19:17
  • added some additional explanation and links – toms Jan 2 at 19:39
  • Hm, this is getting interesting, specially if you throw in also detectRetina option. Requires some logical thinking about the way tiles are fetched from server. – TomazicM Jan 2 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.