Understanding map and tiles coordinates

1. World coordinates and the mercator projection

World coordinates provide a way to reference points uniquely on the map using latitude and longitude.


lat long
Figure 1. Latitude and longitude (source)

Providers of custom online maps like Mapbox employ the World Geodetic System (WGS84) standard for this purpose (source). To convert these geographical coordinates into world coordinates, the Mercator projection is used. This projection translates latitudes and longitudes into pixel positions on a base tile, assuming a map at zoom level 0 is a single \(256 \times 256\) pixel tile covering the entire world.

World coordinates are floating point values that measure from the Mercator projection’s origin, situated at the northwest corner of the map (180 degrees longitude and approximately 85 degrees latitude), increasing eastward (right) and southward (down). Since these values are floating point, they provide high precision beyond the current map resolution, independent of the zoom level.

2. Tiled web maps

A tiled web map is a map displayed in a web browser by seamlessly joining dozens of individually requested image or vector data files. This method is the most popular way to display and navigate maps on the web, as it allows for smooth interaction and navigation (source).

There are several advantages to tiled maps. Each time the user pans, most of the tiles remain relevant and can be kept displayed while new tiles are fetched. This improves the user experience compared to fetching a single map image for the whole viewport. Additionally, individual tiles can be pre-computed, which is a task easy to parallelize (source).

Tiles are typically \(256 \times 256\) pixels in size. At the outermost zoom level (0), the entire world can be rendered in a single map tile. As the zoom level increases, each tile is replaced by four tiles, resulting in more detailed maps (source).


tiled web map
Figure 2. Tiled eb wmap (source)

3. Pixel coordinates

Pixel coordinates reference specific pixels on the map at a given zoom level. They are calculated from world coordinates using the formula:


\[pixelCoordinate = worldCoordinate \times 2^{zoomLevel}\]

Each increment in zoom level doubles the map’s resolution in both the x and y directions, quadrupling the number of pixels. For instance, at zoom level 1, the map comprises 4 tiles of \(256 \times 256\) pixels, resulting in a total pixel space of \(512 \times 512\). At zoom level 19, the pixel space ranges from 0 to \(256 \times 2^{19}\).

By basing world coordinates on the map’s tile size, pixel coordinates at zoom level 0 are equivalent to world coordinates. This system allows precise referencing of each location on the map at any zoom level.

4. Tile coordinates

Tile coordinates are used to reference specific tiles on a tiled web map. Tiles are numbered from the same origin as pixels, with the northwest corner as the origin. X values increase from west to east, and y values increase from north to south.

At zoom level 2, for example, the world is divided into 16 tiles, each uniquely identified by an x, y pair. Tile coordinates are derived by dividing pixel coordinates by the tile size (256) and taking the integer part of the result. This process simplifies determining which tile contains the required map imagery at any given point.


tiles coordinates
Figure 3. Tiles coordinates (source)

5. Geographic coordinates to tile coordinates

To convert geographic coordinates (latitude and longitude) to tile coordinates (x and y), the following formulas are used:


\[x = \left\lfloor \frac{lon + 180}{360} \times 2^{zoom} \right\rfloor\]

\[y = \left\lfloor \left(1 - \frac{ \log\left( \tan\left(\frac{lat \times \pi}{180}\right) + \frac{1}{\cos\left(lat \times \frac{\pi}{180}\right)} \right) }{\pi} \right) \times 2^{zoom} \right\rfloor\]

6. Tile coordinates to geographic coordinates

To convert tile coordinates back to geographic coordinates, the following formulas are used:

\[lon = \frac{x}{2^{zoom}} \times 360 - 180\]

\[lat = \arctan \left( \sinh \left( \pi - \frac{y}{2^{zoom}} \times 2 \pi \right) \right) \times \frac{180}{\pi}\]

7. RGB values in pixels and altitude conversion

Each pixel in a raster image contains RGB (Red, Green, Blue) values. These values range from 0 to 255, representing the intensity of the respective color components. In elevation maps, the RGB values are often used to encode the altitude information.

To convert RGB values to altitude, a common formula is used:


\[altitude = -10000 + ((R \times 256 \times 256 + G \times 256 + B) \times 0.1)\]

Next: Mapbox Terrain-RGB v1 API


References