search

codeforamerica / trailsy

A trip planner and mapper for hiking/biking/riding trail systems.
http://trailsy.herokuapp.com/
30 stars 33 forks source link

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

Open smathermather opened 10 years ago

smathermather commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 notifications@github.com 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/codeforamerica/trailsy/issues/183#issuecomment-28029018 .

smathermather commented 10 years ago

Yes, it wasn't a problem before.

danavery commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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...).