Labels on maps render very small

[mhalle]

Street labels and other text on maps displayed using datasette-cluster-map render very small on Apple (Mac, at least) retina displays. This seems to be an issue with openstreetmap (and other) tiles. Opening the issue as a placeholder for more information on the fix.

[simonw]

Can you share a screenshot?

[simonw]

Oh I see what you mean!

That's new. I think the default https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png server may have changed how it returns tiles.

[simonw]

Example tile: https://c.tile.openstreetmap.org/4/7/7.png

But it's usually rendered at 128px wide for retina size:

[simonw]

This is weird, that tile on Internet Archive a few years ago looks the same: https://web.archive.org/web/20220217160159if_/https://c.tile.openstreetmap.org/4/7/7.png

[simonw]

So maybe it's always looked like this but I never noticed how small the text was?

[mhalle]

I should be clear that I can't confirm it is only on retina displays. I tried changing my screen resolution and it didn't fix the problem. It's just that there is definitely discussion online about text labels being too small on retina displays on OSM (and other sources).

I'm pretty sure I've not had this problem before. (But I upgraded laptops recently, so I wanted to file an issue to confirm.)

[simonw]

My best guess is that OSM don't serve retina tiles at all, and. the default configuration for datasette-cluster-map displays regular tiles but at retina sizes.

The thing that surprises me is that I've never noticed this before. Has it been like this all along, or did something change recently?

[mhalle]

I changed the title of the issue because I'm seeing the same problem on a Chromebook. I've used this plugin before and not been bothered by this problem. It's kind of maddening because it's not like we can roll back the tile server to confirm....

[simonw]

It can't be a change to Leaflet either, because that's vendored: /-/static-plugins/datasette-leaflet/leaflet-v1.7.1.js from https://github.com/simonw/datasette-leaflet/tree/main/datasette_leaflet/static

[simonw]

I'm really confused by this. Leaflet hasn't changed (it's vendored). datasette-cluster-map hasn't changed. According to the Internet Archive the tiles themselves haven't changed either.

[mhalle]

This looks right to me: https://leafletjs.com/examples/quick-start/

[mhalle]

compare to here (full screen screenshot):

[simonw]

Spotted this in the code:

TILE_LAYER = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
TILE_LAYER_OPTIONS = {
    "maxZoom": 19,
    "detectRetina": True,
    "attribution": '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}

[simonw]

Without that detectRetina flag I get this - uglier but no longer illegibly small:

[simonw]

Related: https://gis.stackexchange.com/questions/444988/label-size-in-osm-tiles

I'm confident OpenStreetMap have never offered a free retina tile server. So I can only guess that we've had tiny labels on retina displays on datasette-cluster-map for years!

[simonw]

So this seems to be the fix:

diff --git a/datasette_cluster_map/__init__.py b/datasette_cluster_map/__init__.py
index d91f1a3..fa6cc46 100644
--- a/datasette_cluster_map/__init__.py
+++ b/datasette_cluster_map/__init__.py
@@ -6,7 +6,6 @@ import json
 TILE_LAYER = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 TILE_LAYER_OPTIONS = {
     "maxZoom": 19,
-    "detectRetina": True,
     "attribution": '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 }

[mhalle]

That's probably a reasonable fix. Definitely caused by either local config or leaflet. This example that uses openstreetmap tiles looks better for the same zoom level: https://deck.gl/examples/tile-layer .

deck.gl is definitely something to come back to now that it can use maplibre or other map layers. It's very performant for lots of points, and can support heatmaps and other options.

[simonw]

Fix is out in 0.18.2: https://pypi.org/project/datasette-cluster-map/0.18.2/

[mhalle]

Thanks. FYI, the canonical tile URL is now tile.openstreetmap.org (drop the "a"). https://github.com/openstreetmap/operations/issues/737

[simonw]

I deployed the new plugin version to Datasette Cloud, here's an example map using the new non-retina configuration: https://simon.datasette.cloud/data/high_school_newspapers

[mhalle]

The quality really doesn't suffer much if at all. Thanks for the quick fix.