The @math.gl/web-mercator module is the new home for the now archivedviewport-mercator-project repository, as of Oct 1, 2019.

The @math.gl/web-mercator module offers projection and camera utilities supporting the spherical Web Mercator Projection. At its core, this is a utility for converting to and from map coordinates (i.e. latitude, longitude) to screen coordinates and back.

Who is this for?

Specifically built for use with deck.gl and react-map-gl, but potentially useful for any web mapping application that wants to support perspective enabled Web Mercator Projections with floating point zoom levels.

Example Usage

The WebMercatorViewport class offers the equivalent of a 3D matrix "camera" class of the type you would find in any 3D/WebGL/OpenGL library.

npm install @math.gl/web-mercator --save
import WebMercatorViewport from '@math.gl/web-mercator';

// A viewport looking at San Francisco city area
const viewport = new WebMercatorViewport({
  width: 800,
  height: 600,
  longitude: -122.45,
  latitude: 37.78,
  zoom: 12,
  pitch: 60,
  bearing: 30

viewport.project([-122.45, 37.78]);
// returns pixel coordinates [400, 300]
viewport.unproject([400, 300]);
// returns map coordinates [-122.45, 37.78]