Displaying a minimap

The minimap is very important to provide a fun and accurate guessing experience. We prefer to use Google Maps tiles, primarily served on the url structure:

https://mt{d}.google.com/vt/lyrs={lyrs}&x={x}&y={y}&z={z}

Property	Description	Possible Values	Example	Use Case
d	Subdomain index	0, 1, 2, 3	mt0, mt1, mt2, mt3	Google Maps subdomain for load balancing (handled by tile library)
x	X Coordinate	Any integer	1325	Horizontal tile coordinate (handled by tile library)
y	Y Coordinate	Any integer	3143	Vertical tile coordinate (handled by tile library)
z	Zoom Level	Any integer	13	Zoom level (handled by tile library)
lyrs	Layer Type	Various options	h (roads), m (roadmap), p (terrain), r (altered roadmap), s (satellite), t (terrain only), y (hybrid)	Type of map layer

Main Site Implementation - Leaflet

For managing map interactions, Leaflet is employed. Leaflet is a lightweight, open-source JavaScript library for interactive maps. It is highly flexible and provides easy integration with various map tile providers, including Google Maps.

• Leaflet Documentation: Leaflet Documentation

Extents

Extents are used when selecting custom maps to restrict the default map space to a select area. All of these calculations are handled in the server, but need to be applied on the map whenever necessary.

For example, selecting the USA map should adjust (zoom+pan) the map to only show USA. Extents for official countries can be seen in public/officialCountryMaps.json.

Extents for community maps are be sent via the map endpoints. More on that when discussing the Map system.