Clamp latitude value to valid Web Mercator range when projecting to y

src/geo/transform.js

@@ -21,6 +21,7 @@ class Transform {
     tileZoom: number;
     lngRange: ?[number, number];
     latRange: ?[number, number];
+    maxValidLatitude: number;
     scale: number;
     width: number;
     height: number;
@@ -47,6 +48,7 @@ class Transform {
 
     constructor(minZoom: ?number, maxZoom: ?number, renderWorldCopies: boolean | void) {
         this.tileSize = 512; // constant
+        this.maxValidLatitude = 85.051129; // constant
 
         this._renderWorldCopies = renderWorldCopies === undefined ? true : renderWorldCopies;
         this._minZoom = minZoom || 0;
@@ -284,7 +286,7 @@ class Transform {
     get point(): Point { return new Point(this.x, this.y); }
 
     /**
-     * latitude to absolute x coord
+     * longitude to absolute x coord
      * @returns {number} pixel coordinate
      */
     lngX(lng: number) {
@@ -295,6 +297,7 @@ class Transform {
      * @returns {number} pixel coordinate
      */
     latY(lat: number) {
+        lat = clamp(lat, -this.maxValidLatitude, this.maxValidLatitude);
         const y = 180 / Math.PI * Math.log(Math.tan(Math.PI / 4 + lat * Math.PI / 360));
         return (180 - y) * this.worldSize / 360;
     }
@@ -433,7 +436,7 @@ class Transform {
             this._constrain();
         } else {
             this.lngRange = null;
-            this.latRange = [-85.05113, 85.05113];
+            this.latRange = [-this.maxValidLatitude, this.maxValidLatitude];
         }
     }
 

src/style-spec/reference/v8.json

@@ -144,9 +144,9 @@
       "length": 4,
       "default": [
         -180,
-        -85.0511,
+        -85.051129,
         180,
-        85.0511
+        85.051129
       ],
       "doc": "An array containing the longitude and latitude of the southwest and northeast corners of the source's bounding box in the following order: `[sw.lng, sw.lat, ne.lng, ne.lat]`. When this property is included in a source, no tiles outside of the given bounds are requested by Mapbox GL."
     },
@@ -208,9 +208,9 @@
       "length": 4,
       "default": [
         -180,
-        -85.0511,
+        -85.051129,
         180,
-        85.0511
+        85.051129
       ],
       "doc": "An array containing the longitude and latitude of the southwest and northeast corners of the source's bounding box in the following order: `[sw.lng, sw.lat, ne.lng, ne.lat]`. When this property is included in a source, no tiles outside of the given bounds are requested by Mapbox GL."
     },
@@ -278,9 +278,9 @@
       "length": 4,
       "default": [
         -180,
-        -85.0511,
+        -85.051129,
         180,
-        85.0511
+        85.051129
       ],
       "doc": "An array containing the longitude and latitude of the southwest and northeast corners of the source's bounding box in the following order: `[sw.lng, sw.lat, ne.lng, ne.lat]`. When this property is included in a source, no tiles outside of the given bounds are requested by Mapbox GL."
     },

test/unit/geo/transform.test.js

@@ -13,6 +13,7 @@ test('transform', (t) => {
         const transform = new Transform();
         transform.resize(500, 500);
         t.equal(transform.unmodified, true);
+        t.equal(transform.maxValidLatitude, 85.051129);
         t.equal(transform.tileSize, 512, 'tileSize');
         t.equal(transform.worldSize, 512, 'worldSize');
         t.equal(transform.width, 500, 'width');
@@ -216,6 +217,14 @@ test('transform', (t) => {
         t.end();
     });
 
+    t.test('clamps latitude', (t) => {
+        const transform = new Transform();
+
+        t.equal(transform.latY(-90), transform.latY(-transform.maxValidLatitude));
+        t.equal(transform.latY(90), transform.latY(transform.maxValidLatitude));
+        t.end();
+    });
+
     t.test('clamps pitch', (t) => {
         const transform = new Transform();
 

test/unit/ui/camera.test.js

@@ -503,7 +503,7 @@ test('camera', (t) => {
             const camera = createCamera({ zoom: 0 });
             camera.rotateTo(90, { around: [5, 0], duration: 0 });
             t.equal(camera.getBearing(), 90);
-            t.deepEqual(fixedLngLat(camera.getCenter()), fixedLngLat({ lng: 4.999999999999972, lat: 0.000014144426558004852 }));
+            t.deepEqual(fixedLngLat(camera.getCenter()), fixedLngLat({ lng: 4.999999999999972, lat: 0.000002552471840999715 }));
             t.end();
         });
 
@@ -519,7 +519,7 @@ test('camera', (t) => {
             const camera = createCamera({ zoom: 0 });
             camera.rotateTo(90, { offset: [100, 0], duration: 0 });
             t.equal(camera.getBearing(), 90);
-            t.deepEqual(fixedLngLat(camera.getCenter()), fixedLngLat({ lng: 70.3125, lat: 0.000014144426558004852 }));
+            t.deepEqual(fixedLngLat(camera.getCenter()), fixedLngLat({ lng: 70.3125, lat: 0.000002552471840999715 }));
             t.end();
         });
 
@@ -684,15 +684,15 @@ test('camera', (t) => {
             const camera = createCamera();
             camera.easeTo({ bearing: 90, offset: [100, 0], duration: 0 });
             t.equal(camera.getBearing(), 90);
-            t.deepEqual(fixedLngLat(camera.getCenter()), fixedLngLat({ lng: 70.3125, lat: 0.0000141444 }));
+            t.deepEqual(fixedLngLat(camera.getCenter()), fixedLngLat({ lng: 70.3125, lat: 0.000002552471840999715 }));
             t.end();
         });
 
         t.test('rotates with specified offset relative to viewport on a rotated camera', (t) => {
             const camera = createCamera({bearing: 180});
             camera.easeTo({ bearing: 90, offset: [100, 0], duration: 0 });
             t.equal(camera.getBearing(), 90);
-            t.deepEqual(fixedLngLat(camera.getCenter()), fixedLngLat({ lng: -70.3125, lat: 0.0000141444 }));
+            t.deepEqual(fixedLngLat(camera.getCenter()), fixedLngLat({ lng: -70.3125, lat: 0.000002552471840999715 }));
             t.end();
         });