search

therealPaulPlay / OpenGuessrEducation

This is the educational hub for OpenGuessr. Here, you can gain new knowledge and improve your geography skills.
https://education.openguessr.com
Other
3 stars 4 forks source link

Coverage map #9

Open ReAnnannanna opened 1 week ago

ReAnnannanna commented 1 week ago

Hi! I see you're using an embed of sv-map here: https://github.com/therealPaulPlay/OpenGuessrEducation/blob/a9973f957a50765627c417880146b89270cba617/src/routes/guides/read/beginner/coverage/%2Bpage.svelte#L17-L20

That's not a problem, but because of the controls and information on sv-map, it's maybe not the best solution for a guide.

I suspect you're using the embed because the tile layers that sv-map uses are not "publicly" available (at least not documented anywhere). If you'd like, you can use any mapping solution you want with these tile URLs:

{x}, {y}, and {z} should be replaced by the tile coordinate, I think most mapping libraries use this format for tile urls by default.

Just thought I'd let you know. Feel free to continue using the sv-map embed if you prefer!

therealPaulPlay commented 1 day ago

Hi ReAnnannanna! Sorry for responding to this issue late, I somehow didn't get a notification :P

I am a big fan of your StreetView Map and the Map-Making tools, and thank you for letting me continue embedding the sv-map on the page! You are right, the controls, in a small iframe like this, are a bit big, they don't obstruct the view that much in my opinion(and can be closed), on a phone that is a bigger issue however... I'll consider building a simple map for this guide, though I unfortunately have very little time at the moment. I guess, people can also use the link on the page to open the website directly full-sized and explore some of the cool features it has.

Thank you for sending me these Google Tile Layers! I am aware of the existence of the regular layers, but haven't seen the ones for the coverage yet, very cool! ~Though, I haven't been able to get them to look less blurry on HiDPI screens. I've noticed that this is not the case on sv-map where the map is nice and crisp, may I ask, how you achieved that? :)~

~Leaflet has the option detectRetina: true for TileLayers which kinda fixes it, but that makes the labels on the tiles incredibly small on high-res screens...~

By the way, you likely already know this, but you can strip out the other data for these tile layer links to make them a bit cleaner, like this: https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&hl=en (Base Map, Language English) The lyrs= controls the map type, m is Roadmap, s is satellite, s,h is the hybrid map (satellite + labels) and p is terrain (not sure if that works for the coverage layer). {s} (for subdomain) can also be replaced with mts for automatic load balancing, otherwise you can balance it manually in leaflet and alternate between mt0 - mt4.

Cheers!

Edit: I managed to find the secret sauce😆 adding &scale=2 at the end of the Tile URL (https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&hl=en&scale=2) makes it 2x the size, therefore crsip on all screens!

ReAnnannanna commented 1 day ago

Right! The final !5f1 in the links I shared is a scale factor. On sv-map I set that to window.devicePixelRatio to get the right size for all screens. For example, !5f1:

!5f2:

therealPaulPlay commented 22 hours ago

Ah, thank you!! I'll look into that :) I think there is no real downside of getting the higher-res tiles for all devices though, am I wrong?