Tile cache for maps not rendering correctly on hi-res Android

[smathermather]

em scaling (or whatever the approach) is working great for fonts/icons etc., but the map tile cache is displaying very small. Should switch map cache to retina version for hi-res mobile screens.

[louh]

mapbox.js has a built in feature to detect retina displays, and to use an alternative Mapbox tileset if it's true. We do this very effectively on lv-trucks-map (see: https://github.com/codeforamerica/lv-trucks-map/blob/master/js/main.js#L215-L218).

[louh]

After some look through the code I realize you're using not mapbox.js but the vanilla leaflet.js, which does detect Retina displays (http://leafletjs.com/reference.html#tilelayer) but doesn't include an option to use an alternative map ID. It only scales up the original map ID. I believe this should be good enough, if no other style changes are necessary for mobile devices.

[danavery]

Yea, it's vanilla leaflet (apart from a custom change from Vladimir we
needed to fix a bug on iOS 7). But weird--I had the detectRetina setting
turned on at one point, but when I redid the map creation function a couple
weeks ago I guess I left it out.

On Thu, Nov 7, 2013 at 6:44 PM, Lou Huang [email protected] wrote:

I created this Map ID on Mapbox to show how retina tiles look:
codeforamerica.g7kdc8bf (
https://a.tiles.mapbox.com/v3/codeforamerica.g7kdc8bf/page.html?secure=1#12/41.332095778263344/-81.69502258300781
)

After some look through the code I realize you're using mapbox.js but the
vanilla leaflet.js, which does detect Retina displays (
http://leafletjs.com/reference.html#tilelayer) but doesn't include an
option to use an alternative map ID. It only scales up the original map ID.
I believe this should be good enough, if no other style changes are
necessary for mobile devices.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/183#issuecomment-28029018
.

[smathermather]

Yes, it wasn't a problem before.

[danavery]

Actually, I just realized that we are using the detectRetina option. I made a custom change to the Leaflet-Providers plugin to set detectRetina by default for Mapbox tiles.

[smathermather]

Hmm. I don't remember seeing this as an issue before, but now that I think about it-- I had not seen a map on my android before. So I assume then that detectRetina doesn't detect high-resolution non-retina screens.

[smathermather]

Sounds like this might be fixed by a move away from retina tiles? (can't find an issue on this, just referencing an e-mail I saw from Alan...).