MapMath
Get the guide

CHAPTER 06

Pixel and world coordinates

World pixels and screen pixels: the coordinate system behind every marker, overlay, and mouse-to-lat-lon conversion at any zoom level.

3 min read

Tiles tell you which 256×256 PNG to load. But once the tiles are on screen, you need a second coordinate system to answer questions like: where exactly does this lat/lon fall in the rendered canvas? Which lat/lon does the user's mouse point at? How do I draw a line from point A to point B in pixel space?

That's where pixel coordinates come in — a global pixel grid that covers the entire world at a given zoom level, into which both geographic coordinates and screen positions can be mapped.

Lat/Lon → World pixel coordinates

World pixel X

185,219

World pixel Y

106,866

Tile

723/417

Pixel in tile

131, 114

World size at z10: 262,144 × 262,144 px (1,024 tiles per axis)

World pixel coordinates

optional — skip if familiarrefresher

The world pixel coordinate system is an extension of the tile system. At zoom z:

  • The world is 256 × 2^z pixels wide and tall
  • Tile (x, y) occupies the 256×256 pixel block starting at (x*256, y*256)
  • Pixel coordinates are continuous — a marker can sit at any pixel, not just tile boundaries

At zoom level z, the entire world is 256×2z256 \times 2^z pixels wide and tall. So:

worldSize=256⋅2z\text{worldSize} = 256 \cdot 2^z px=worldSize⋅λ+180360p_x = \text{worldSize} \cdot \frac{\lambda + 180}{360} py=worldSize⋅(12−ln⁡ ⁣(1+sin⁡φ1−sin⁡φ)4π)p_y = \text{worldSize} \cdot \left(\tfrac{1}{2} - \frac{\ln\!\left(\frac{1 + \sin\varphi}{1 - \sin\varphi}\right)}{4\pi}\right)

The second equation is just the Mercator y, normalized to the range [0, worldSize]. The 1/2 - part shifts the range so that the equator maps to the vertical midpoint.

From pixel back to lat/lon

λ=pxworldSize⋅360−180\lambda = \frac{p_x}{\text{worldSize}} \cdot 360 - 180 n=π⋅(1−2pyworldSize)n = \pi \cdot \left(1 - \frac{2 p_y}{\text{worldSize}}\right) φ=arctan⁡(sinh⁡n)⋅180π\varphi = \arctan(\sinh n) \cdot \frac{180}{\pi}

Worked example

Q: What's the pixel coordinate of (0, 0) — the equator and prime meridian — at zoom 4?

worldSize=256×16=4096\text{worldSize} = 256 \times 16 = 4096 px=4096×(0+180)/360=2048p_x = 4096 \times (0 + 180) / 360 = 2048 py=4096×(0.5−0)=2048(sin⁡0=0)p_y = 4096 \times (0.5 - 0) = 2048 \quad (\sin 0 = 0)

Dead center, as expected.

Chapter 6 · Paid content

Continue reading "Pixel and world coordinates"

You've reached the end of the free preview. Unlock all 22 paid chapters, including distance math, bearings, polygons, spatial indexing, and 3D map rendering — plus a downloadable PDF and the companion code repo.

  • All 22 paid chapters with worked examples
  • Downloadable PDF for offline reading
  • Companion GitHub repo (JavaScript + Python)
  • Free updates for life
Get full access — $39Back to chapters

Multiple payment options including Wise, PayPal, and bank transfer.