Street labels in Mapbox Tile Layer too small

12
votes

I have the following Leaflet map: JSFiddle link

<div id="mapid" style="height: 300px;"></div>

<script>
  var mapboxTiles = L.tileLayer(mapBoxUrl, {
    attribution: attributionText
  });

  var map = L.map('mapid')
    .addLayer(mapboxTiles)
    .setView([42.888284, -78.877222], 16);

</script>

The font size for the street labels is very small, to the point of being unreadable, and when you zoom in, the font size gets smaller. Is there a way to control the font size?

2
leafletmapbox

2 Answers

22
votes

It looks like you have 512px sized tiles, but mapping the Earth as if they were 256px sized.

Therefore you need a combination of tileSize and zoomOffset options on your Tile Layer to compensate for these settings, and retrieve the correct view with readable sized text on the tiles:

var mapboxTiles = L.tileLayer(mapBoxUrl, {
  attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  tileSize: 512,
  zoomOffset: -1
});

Updated JSFiddle: https://jsfiddle.net/zq02pnpg/2/

1
votes

I had this problem too. On my case, the map was rendering just okay on desktop, but when it came to mobile devices, it)(The font size) gets really small and is not readable. I tried doubling the tile size as well as the zoom offset and it worked.

var mapboxTiles = L.tileLayer(mapBoxUrl, {
  attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  tileSize: 1024,
  zoomOffset: -2
});

I'm not sure if this is a violation of any kind but it worked for me!