Demystifying Coordinate Reference Systems: EPSG:4326 vs EPSG:3857

Why is my map rendering in the ocean?

If you've ever plotted data on a map and found your points ending up off the coast of Africa (Null Island), you have encountered a Coordinate Reference System (CRS) mismatch. The two most important EPSG codes for web developers are EPSG:4326 and EPSG:3857.

EPSG:4326 (WGS 84)

This is the geographic coordinate system used by GPS. It represents locations using Latitude and Longitude degrees on a 3D model of the Earth (a datum).

• Units: Degrees.
• Example: London is [51.5074° N, 0.1278° W].
• Use Case: Storing data in databases, GeoJSON, and capturing GPS coordinates.

EPSG:3857 (Web Mercator)

This is a projected coordinate system used by almost all web mapping libraries (Google Maps, OpenStreetMap, Mapbox). It takes the 3D globe and flattens it onto a 2D square. Because it's a square, it severely distorts the poles (which is why Greenland looks as big as Africa on Google Maps).

• Units: Meters.
• Example: London is roughly [6711514m North, 14224m West].
• Use Case: Rendering map tiles on a flat screen.

The Golden Rule of Web Mapping

Store your data in EPSG:4326. Render your maps in EPSG:3857.

Most mapping libraries (like Leaflet or Mapbox GL JS) will automatically project your EPSG:4326 GeoJSON data into EPSG:3857 for rendering on the screen. However, if you are generating raw vector tiles on a backend server, you must mathematically project the geometries yourself using tools like proj4js or GDAL.