[solved] Mapbox Studio / Leaflet / map on webpage has to small fonts

[horst]

Hi,

has someone used the mapbox studio to create an own map design? I tried it and see in the mapbox studio my map like this:

And when calling this design on the webpage, it is shown way to small:

Independent of the zoom factor of the map, the fonts would be at the same readable size. But in my web implementation its always way to small. When I use the zoom in, they shortly popup greater and then directly downsizes.

Does anyone knows what I'm doing wrong?

 

[Robin S]

2 hours ago, horst said:

has someone used the mapbox studio to create an own map design?

I haven't used it, but maybe this section of the documentation is relevant: https://docs.mapbox.com/studio-manual/reference/styles/#typography

 

[horst]

6 hours ago, Robin S said:

I haven't used it, but maybe this section of the documentation is relevant: https://docs.mapbox.com/studio-manual/reference/styles/#typography

 

Thanks Robin. But unfortunately this isn't it. If I set the font sizes there to maximum, they are displayed way to small in my webintegration. It is like the whole map is scaled down 2 or 3 times, not only font sizes.

[MoritzLost]

We are using Mapbox and a Studio style with Leaflet for the Architekturführer Köln Map. Are you using raster or vector tiles? We're using raster tiles, in this case it may be caused by the zoomOffset and tileSize in your tileLayer. For reference, here's our tileLayer definition:

const tileLayer = L.tileLayer(
    "https://api.mapbox.com/styles/v1/schwarzdesign/{STYLE_ID}/tiles/256/{z}/{x}/{y}@2x?access_token={TOKEN}",
    {
        maxZoom: 18,
        tileSize: 256,
        zoomOffset: 0,
        attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap</a> | <a href="https://www.mapbox.com/map-feedback/#/-74.5/40/10">Improve this map</a>',
    }
);

Previously we used tileSize: 512 and zoomOffset: -1 to cut down on the number of tile requests. This way each tile was much larger, which resulted in much larger text. In any case, you could use those settings to offset your scaling issues (though this is of course a workaround, not a fix).

If you're using vector tiles I have no idea ?

[horst]

8 minutes ago, MoritzLost said:

Previously we used tileSize: 512 and zoomOffset: -1 to cut down on the number of tile requests. This way each tile was much larger, which resulted in much larger text. In any case, you could use those settings to offset your scaling issues (though this is of course a workaround, not a fix).

If you're using vector tiles I have no idea

Hi Moritz,

many thanks. I had no explicit settings for tileSize and zoomOffset in my script. I only had maxZoom, id and accessToken. Also I don't no if I get vector or raster tiles ATM. But simply adding your suggested settings already worked for me. Yeah! ?

Now I know that it is possible (for me) to go this way with a customized map and can go more in depth to explore how to setup it all well. (Yesterday I struggled on this and wasted some hours.) 

[horst]

25 minutes ago, MoritzLost said:

We are using Mapbox and a Studio style with Leaflet for the Architekturführer Köln Map.

Ok, I should have used that. ? Very nice! It's also monochrome gray.

You have left the country name labels in english, all other labels seems to be in german. What was/is the reason for this?

[MoritzLost]

1 hour ago, horst said:

many thanks. I had no explicit settings for tileSize and zoomOffset in my script. I only had maxZoom, id and accessToken. Also I don't no if I get vector or raster tiles ATM. But simply adding your suggested settings already worked for me. Yeah! ?

Great ? You can tell what kind of tiles you're using by the API endpoint your tileLayer is calling. My code above uses /tiles/ after the style which is the endpoint for raster tiles. Or check the network tab in the Devtools, if your tile requests are returning PNGs you're using raster tiles, for vector tiles it would probably be JSON.

1 hour ago, horst said:

You have left the country name labels in english, all other labels seems to be in german. What was/is the reason for this?

You're not supposed to scroll out ? No idea honestly, IIRC we adapted one of the default styles slightly, might've been an oversight. Doesn't really matter since the map just focusses around Cologne, so normally you won't see the country names ?