13

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?

ghybs
  • 47,565
  • 6
  • 74
  • 99
Amit
  • 7,688
  • 17
  • 53
  • 68

2 Answers2

27

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/

chelmertz
  • 20,399
  • 5
  • 40
  • 46
ghybs
  • 47,565
  • 6
  • 74
  • 99
  • Out of curiosity, how did you know what sized tiles I was using and how I was mapping them? – Amit May 05 '16 at 15:30
  • 4
    Right-click on your map tiles and select "view image" to get a single tile, on which you can get the image properties. As for the mapping, changing only the tile size makes the view land in a totally different place for given coordinates, which means the zoom should also be adjusted. – ghybs May 05 '16 at 21:27
  • 1
    Anyone know what causes this? I've just set up a map using all the latest example code and had the same issue. Also the link to the tileSize docs should be https://leafletjs.com/reference-1.6.0.html#gridlayer-tilesize – Matt Kemp Dec 27 '19 at 03:21
  • Very nice, this was how I needed to apply the solution for dash-leaflets ``dl.Map(id=MAP_ID, style={'width': '1000px', 'height': '500px'}, center= [29,-97] , zoom=8, children=[ dl.TileLayer(url=mapbox, tileSize = 512, zoomOffset = -1)])`` – Tunneller Jul 12 '21 at 19:20
1

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!

Gustone Alwanga
  • 101
  • 6